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>