Bootstrap Carousel, loop every two items
<p>I'm trying to get the carousel to show two items per slide in every loop which isn't working at the moment, here is the code that I have:-</p>

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

    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;

    &lt;?php if ($x == 0 || $x == 1) { ?&gt;

        &lt;div class="item active"&gt;

            &lt;div class="col-md-12 row"&gt;

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

            &lt;/div&gt;

        &lt;/div&gt;

        &lt;?php } ?&gt;

        &lt;?php if ($x == 2 || $x == 3) { ?&gt;

        &lt;div class="item"&gt;

            &lt;div class="col-md-12 row"&gt;

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

            &lt;/div&gt;

        &lt;/div&gt;

        &lt;?php } ?&gt;

    &lt;/div&gt;

    &lt;?php $x++; endwhile; endif; wp_reset_query(); ?&gt;

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

&lt;/div&gt;
</code></pre>

<p>At the moment it is just displaying as follows and not scrolling:-</p>

<p><a href="https://i.stack.imgur.com/RqeHo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RqeHo.png" alt="enter image description here"></a></p>

<p>Also, at the moment there are only 4 items, where as it could have 20 items+, how could I adapt my code so it only shows two items at a time without having to specify the ones I want to display (replacing: )</p>

<p>Thanks in advance</p>