Question

我正在尝试让旋转木马在每个循环中显示两个项目，此时此刻不起作用，这是我的代码： -

<div id="hot-jobs-carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
    <?php
        if ($x == 0) {
        echo '<li data-target="#hot-jobs-carousel" data-slide-to="0" class="active"></li>';
        } else {
        echo '<li data-target="#hot-jobs-carousel" data-slide-to="'.$x.'"></li>';
        }
    ?>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

    <?php if ($x == 0 || $x == 1) { ?>

        <div class="item active">

            <div class="col-md-12 row">

                <a href="<?php echo get_permalink(); ?>">
                    <div class="<?php echo $job_sector_html; ?>-wrapper sector-wrapper">
                        <p class="job-sector"><span id="icon-<?php echo $job_sector_html; ?>" class="icon-sector-sm"></span><?php the_field('job_sector'); ?></p>
                        <p class="job-title"><?php echo get_the_title( $ID ); ?></p>
                        <p class="job-attributes"><?php echo get_field('job_location') . ' | ' . get_field('job_type') . ' | ' . $job_salary; ?></p>
                        <div class="view-job <?php echo $job_sector_html; ?>-bg">View<br>this job</div> 
                    </div> 
                </a>

            </div>

        </div>

        <?php } ?>

        <?php if ($x == 2 || $x == 3) { ?>

        <div class="item">

            <div class="col-md-12 row">

                <a href="<?php echo get_permalink(); ?>">
                    <div class="<?php echo $job_sector_html; ?>-wrapper sector-wrapper">
                        <p class="job-sector"><span id="icon-<?php echo $job_sector_html; ?>" class="icon-sector-sm"></span><?php the_field('job_sector'); ?></p>
                        <p class="job-title"><?php echo get_the_title( $ID ); ?></p>
                        <p class="job-attributes"><?php echo get_field('job_location') . ' | ' . get_field('job_type') . ' | ' . $job_salary; ?></p>
                        <div class="view-job <?php echo $job_sector_html; ?>-bg">View<br>this job</div> 
                    </div> 
                </a>

            </div>

        </div>

        <?php } ?>

    </div>

    <?php $x++; endwhile; endif; wp_reset_query(); ?>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#hot-jobs-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#hot-jobs-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

目前它只是显示如下而不是滚动： -

此外，目前只有4个项目，因为它可以有20个项目+，我怎么能调整我的代码所以它一次只显示两个项目而不必指定我想要显示的项目（替换：）

提前致谢

Answer 1

你的项目中有一个div，包含类行和类col-md-12，但是列需要在一行内，这可能会有所帮助

试试这个：

<div class="item active">
    <div class="row">
        <div class="col-md-12">
            <a href="<?php echo get_permalink(); ?>">
            <div class="<?php echo $job_sector_html; ?>-wrapper sector-wrapper">
            <p class="job-sector"><span id="icon-<?php echo $job_sector_html; ?>" class="icon-sector-sm"></span><?php the_field('job_sector'); ?></p>
            <p class="job-title"><?php echo get_the_title( $ID ); ?></p>
            <p class="job-attributes"><?php echo get_field('job_location') . ' | ' . get_field('job_type') . ' | ' . $job_salary; ?></p>
            <div class="view-job <?php echo $job_sector_html; ?>-bg">View<br>this job</div> 
        </div> 
        </a>
        </div>
    </div>
</div>
<?php } ?>
<?php if ($x == 2 || $x == 3) { ?>

<div class="item">
    <div class="row">
        <div class="col-md-12">
            <a href="<?php echo get_permalink(); ?>">
                <div class="<?php echo $job_sector_html; ?>-wrapper sector-wrapper">
                    <p class="job-sector"><span id="icon-<?php echo $job_sector_html; ?>" class="icon-sector-sm"></span><?php the_field('job_sector'); ?></p>
                    <p class="job-title"><?php echo get_the_title( $ID ); ?></p>
                    <p class="job-attributes"><?php echo get_field('job_location') . ' | ' . get_field('job_type') . ' | ' . $job_salary; ?></p>
                    <div class="view-job <?php echo $job_sector_html; ?>-bg">View<br>this job</div> 
                </div> 
            </a>
        </div>
    </div>
</div>

Answer 2

使用以下简化代码管理解决问题： -

<?php if($job_increment==0 || $job_increment%2==0 ){ echo '<div class="item '.(($job_increment==0)?'active':'').'">'; } ?>
        <div class="row">
            <div class="col-md-12">
                <div class="<?php echo $job_sector_html; ?>-wrapper sector-wrapper">
                    <p class="job-sector"><span id="icon-<?php echo $job_sector_html; ?>" class="icon-sector-sm"></span><?php the_field('job_sector'); ?></p>
                    <p class="job-title"><?php the_title( $ID ); ?></p>
                    <p class="job-attributes"><?php echo get_field('job_location') . ' | ' . get_field('job_type') . ' | ' . $job_salary; ?></p>
                    <a href="<?php echo get_permalink(); ?>"><div class="view-job <?php echo $job_sector_html; ?>-bg">View<br>this job</div></a>
                </div>
            </div>
        </div>
    <?php echo ($job_increment%2!=0)?'</div>':''; ?>
<?php $job_increment++; endwhile; ?>

注意：将$ x更改为$ job_sector;

Bootstrap Carousel，每两个循环一次

2 个答案: