How do I write a foreach loop for a Bootstrap carousel in php?
<p>I am trying to write a foreach loop for a Bootstrap Carousel in PHP, but the problem I'm having is, the first slide's <em>div</em> must be set as "active" but not the rest, and the <em>li</em>'s "data-slide-to" must be set to the correct number, making the first one "[0]" have a class of active, but not the rest... </p>

<p>I know how to get the first result of the foreach, but I don't know how to call the second and beyond separately, nor how to make it match it to the "data-slide-to". </p>

<p>Here is my code below.
<br/><strong>Disclaimer:</strong> the PHP code is Wordpress-specific, but the answer to the problem does not involve Wordpress-specific code.</p>

<p>PHP
    

<pre><code>$query_images_args = array(
    'post_type'      =&gt; 'attachment',
    'post_mime_type' =&gt; 'image',
    'post_status'    =&gt; 'inherit',
    'posts_per_page' =&gt; - 1,
);

$query_images = new WP_Query( $query_images_args );

$images = array();
foreach ( $query_images-&gt;posts as $image ) {
    $images[] = wp_get_attachment_url( $image-&gt;ID );
}

for($i = 0; $i &lt; count($images); $i++) {
$imageURL = $images[$i];

// I would echo all the entries with: 
// echo $imageURL;

}
</code></pre>

<p>HTML</p>

<pre><code>&lt;div id="myCarousel" class="carousel slide"&gt;

        &lt;!-- Indicators --&gt;
        &lt;ol class="carousel-indicators"&gt;
//Here's the active "li", which would be set to $imageURL[0]
            &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
//Here are the rest of the "li"s , which idk how to set up?
            &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
            &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;/ol&gt;


        &lt;!-- Wrapper for Slides --&gt;

        &lt;div class="carousel-inner"&gt;
            &lt;div class="item active"&gt;
                &lt;!-- Set the first background image using inline CSS below. --&gt;
//Again, I know to set the background-image:url to  '&lt;?php echo $imageURL[0] ?&gt;'
                &lt;div class="fill" style="background-image:url('img/01.png');"&gt;&lt;/div&gt;
                &lt;div class="carousel-caption"&gt;
                    &lt;h2&gt;Caption 1&lt;/h2&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
                &lt;!-- Set the second background image using inline CSS below. --&gt;
//Not sure about here...
                &lt;div class="fill" style="background-image:url('img/02.png');"&gt;&lt;/div&gt;
                &lt;div class="carousel-caption"&gt;
                    &lt;h2&gt;Caption 2&lt;/h2&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
                &lt;!-- Set the third background image using inline CSS below. --&gt;
//This part needs to be covered by the 2nd imageURL and beyond...
                &lt;div class="fill" style="background-image:url('img/03.png');"&gt;&lt;/div&gt;
                &lt;div class="carousel-caption"&gt;
                    &lt;h2&gt;Caption 3&lt;/h2&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;


        &lt;!-- Controls --&gt;

        &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
            &lt;span class="icon-prev"&gt;&lt;/span&gt;
        &lt;/a&gt;
        &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
            &lt;span class="icon-next"&gt;&lt;/span&gt;
        &lt;/a&gt;

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

<p>Not sure if I'm approaching it correctly, but I cannot get it to work.</p>