title: How do I write a foreach loop for a Bootstrap carousel in php?
body: <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>