title: Sliders in Laravel
body: <p>I am not able to show images in slider one by one, it displays all images at once.  My static code is here and it works well with sliding images.</p>
  
  <pre><code>    &lt;section id="main-slider" class="no-margin" data-ride="carousel"&gt;
      &lt;div class="carousel slide"&gt;
          &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#main-slider" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#main-slider" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#main-slider" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;/ol&gt;
          &lt;div class="carousel-inner"&gt;
  
              &lt;div class="item active" style="background-image: url(users/assets/images/New/4.jpg)"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="row slide-margin"&gt;
  
                          &lt;div class="col-sm-12"&gt;
                              &lt;div class="media services-wrap wow fadeInDown"&gt;
                                  &lt;div class="pull-left"&gt;
                                      &lt;img class="img-responsive" src="images/services/services1.png"&gt;
                                  &lt;/div&gt;
                                  &lt;div class="media-body"&gt;
                                      &lt;h3 class="media-heading"&gt;SEO Marketing&lt;/h3&gt;
                                      &lt;p&gt;Lorem ipsum dolor sit ame consectetur adipisicing elit&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--/.item--&gt;
  
  
          &lt;/div&gt;&lt;!--/.carousel-inner--&gt;
      &lt;/div&gt;&lt;!--/.carousel--&gt;
      &lt;a class="prev hidden-xs" href="#main-slider" data-slide="prev"&gt;
          &lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;a class="next hidden-xs" href="#main-slider" data-slide="next"&gt;
          &lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;
      &lt;/a&gt;
  &lt;/section&gt;&lt;!--/#main-slider--&gt;
  </code></pre>
  
  <p>When i made it dynamic it is not sliding images, but displaying all images from database</p>
  
  <pre><code>&lt;section id="main-slider" class="no-margin" data-ride="carousel"&gt;
  &lt;div class="carousel slide"&gt;
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#main-slider" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#main-slider" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#main-slider" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;div class="carousel-inner"&gt;
  
          &lt;div class="item active" style="background-image: url(users/assets/images/New/4.jpg)"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row slide-margin"&gt;
  
  
          &lt;div class="col-md-12"&gt;
              &lt;div class="media services-wrap wow fadeInDown"&gt;
                  @foreach($data as $data)
                  &lt;img src="{{asset($data-&gt;image)}}"&gt;
                  &lt;h4&gt;{{ $data-&gt;text}}&lt;/h4&gt;
                  @endforeach
              &lt;/div&gt;
          &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!--/.item--&gt;
  
  
      &lt;/div&gt;&lt;!--/.carousel-inner--&gt;
  &lt;/div&gt;&lt;!--/.carousel--&gt;
  &lt;a class="prev hidden-xs" href="#main-slider" data-slide="prev"&gt;
      &lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;
  &lt;/a&gt;
  &lt;a class="next hidden-xs" href="#main-slider" data-slide="next"&gt;
      &lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p></p>
  
  <p>How can i slide image one by one</p>