Bootstrap Карусель, петля каждые два предмета

Я пытаюсь заставить карусель показывать по два элемента на слайде в каждом цикле, который в данный момент не работает, вот код, который у меня есть: —

<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 элементов +, как я могу адаптировать свой код, чтобы он отображал только два элемента за один раз без необходимости указывать те, которые я хочу отображать (заменяя:)

заранее спасибо

0

Решение

В вашем элементе есть 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>
0

Другие решения

Удалось решить проблему с помощью приведенного ниже упрощенного кода:

<?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;

0