Sliders in Laravel - php

Question

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.
<section id="main-slider" class="no-margin" data-ride="carousel">
<div class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" style="background-image: url(users/assets/images/New/4.jpg)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-12">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services1.png">
</div>
<div class="media-body">
<h3 class="media-heading">SEO Marketing</h3>
<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
</div>
</div>
</div>
</div>
</div>
</div><!--/.item-->
</div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
</section><!--/#main-slider-->
When i made it dynamic it is not sliding images, but displaying all images from database
<section id="main-slider" class="no-margin" data-ride="carousel">
<div class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" style="background-image: url(users/assets/images/New/4.jpg)">
<div class="container">
<div class="row slide-margin">
<div class="col-md-12">
<div class="media services-wrap wow fadeInDown">
#foreach($data as $data)
<img src="{{asset($data->image)}}">
<h4>{{ $data->text}}</h4>
#endforeach
</div>
</div>
</div>
</div>
</div><!--/.item-->
</div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
How can i slide image one by one

Answer 1

Try put this div in Foreach loop '<div class="item"></div>'.
As It seems .item class will work as each slide.
Check this link for example..
http://jsfiddle.net/WmMXa/3/
Hope it helps

Answer 2

Put the foreach before your carousel-item and add this code class = $loop->first ? 'active' : '' that will put only the first photo as active as your static code does.
#foreach( $photos as $photo )
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
<img class="d-block img-fluid" src="{{ $photo->image }}" alt="{{ $photo->title }}">
<div class="carousel-caption d-none d-md-block">
<h3>{{ $photo->title }}</h3>
<p>{{ $photo->descriptoin }}</p>
</div>
</div>
#endforeach`
Hopefully, it will work for you.