I’m using laravel and I want use slider in my index page, here is my slider code:
<div class="home-slideshow">
<div id="home_main-slider" class="carousel slide main-slider">
<ol class="carousel-indicators">
<li data-target="#home_main-slider" data-slide-to="0" class="carousel-1"></li>
</ol>
<div class="carousel-inner">
@foreach($banners as $banner)
<!-- slider images -->
<div class="item image active">
<img src="{{url('/')}}/images/{{$banner->slider_one}}" height="362" alt="{{$banner->slider_one_title}}" title="Image Slideshow">
<div class="slideshow-caption position-right">
<div class="slide-caption">
<div class="group-caption">
<div class="content">
<span class="title_2">
{{$banner->slider_one_title}}
</span>
<span class="caption">
{{$banner->slider_one_description}}
</span>
</div>
<div class="flex-action"><a class="btn" href="{{$banner->slider_one_link}}">{{$banner->slider_one_button}}</a></div>
</div>
</div>
</div>
</div>
<!-- slider images -->
@endforeach
</div>
<a class="left carousel-control" href="#home_main-slider" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#home_main-slider" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
I can get my image, text,etc. but i want to know to get slider buttons work?
UPDATE
this is my latest code base on suggestions, but still slides not changing,
I think something in bottom of slider codes has to change (where next and previous codes are)
<div class="home-slideshow">
<div id="home_main-slider" class="carousel slide main-slider">
<ol class="carousel-indicators">
@foreach($banners as $key => $banner)
<li data-target="#home_main-slider" data-slide-to="{{$key}}" class="carousel-1">
</li>
@endforeach
</ol>
<div class="carousel-inner">
@foreach($banners as $banner)
<!-- slider images -->
@if ($loop->first)
<div class="item image active">
@else
<div class="item image">
@endif
<img src="{{url('/')}}/images/{{$banner->slider_one}}" height="362" alt="{{$banner->slider_one_title}}">
<div class="slideshow-caption position-right">
<div class="slide-caption">
<div class="group-caption">
<div class="content">
<span class="title_2">
{{$banner->slider_one_title}}
</span>
<span class="caption">
{{$banner->slider_one_description}}
</span>
</div>
<div class="flex-action"><a class="btn" href="{{$banner->slider_one_link}}">{{$banner->slider_one_button}}</a></div>
</div>
</div>
</div>
</div>
<!-- slider images -->
@endforeach
</div>
<a class="left carousel-control" href="#home_main-slider" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#home_main-slider" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>