title: How to loop bootstrap Carousels?
body: <p>i am trying to loop carousels from mysql data.the following is my code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="bs-example"&gt;
      &lt;div id="myCarousel" class="carousel slide" data-interval="2000" data-ride="carousel"&gt;
          &lt;!-- Carousel indicators --&gt;
          &lt;ol class="carousel-indicators"&gt;
          @for($i=0;$i&lt;=count($data);$i++)
              &lt;li data-target="#myCarousel" data-slide-to="{{$i}}" class=""&gt;&lt;/li&gt;
              @endfor;
          &lt;/ol&gt;   
          &lt;!-- Wrapper for carousel items --&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="active item"&gt;
                  &lt;img src="images/1.jpg" alt="First Slide"&gt;
                  &lt;div class="carousel-caption"&gt;
                    &lt;h3&gt;First slide label&lt;/h3&gt;
                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              @foreach($data as $val)
  
  
              &lt;div class="item"&gt;
                  &lt;img src="{{ $val['featured_image']}}" alt="Second Slide"&gt;
                  &lt;div class="carousel-caption"&gt;
                    &lt;h3&gt;{{ $val['title']}}&lt;/h3&gt;
                    &lt;p&gt;{{ $val['description']}}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              @endforeach
  
          &lt;/div&gt;
  
          &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;
              &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;
              &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;     
  </code></pre>
  
  <p>the above code works only if i add following line </p>
  
  <pre><code>&lt;div class="active item"&gt;
                  &lt;img src="images/1.jpg" alt="First Slide"&gt;
                  &lt;div class="carousel-caption"&gt;
                    &lt;h3&gt;First slide label&lt;/h3&gt;
                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>if i remove above code then slider not display any images.i think i need to keep my fist slider image need to be active .how to achieve that without adding default active code ?thank you in advance   </p>