I am using a carousel to slide an image. When I was using with a static image it was working fine, but when I used it with the data from database it is only showing the first element and not sliding. When I am click on the arrow then it’s also neither moving left nor right.
My view code is:
<div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> @foreach($carousel as $index =>$image) <div class="carousel-inner" ><!-- Inner wrapper for slides --> <div class="item @if($index == '1'){{'active'}}@endif"> <!-- First item slider --> <img src="{{ url('images/photos').'/'.$image->photo_name}}"> <!-- First item background image slider --> <div class="carousel-caption overlay"> <div class="content"> <div class="text wow bounceIn animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-name: bounceIn; -webkit-animation-name: bounceIn;"> <h1>{{$image->category_name.' photography'}}</h1> </div> </div> </div> <!-- End first item background image slider --> </div> <!-- End first item slider --> </div> @endforeach <!-- Controls --> <div class="arrow"> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span><img src="{{ url('user/image/left.png')}}"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span><img src="{{ url('user/image/right.png')}}"></span> </a>
Advertisement
Answer
The div <div class="carousel-inner" role="listbox">
should be outside the foreach, as it’s a wrapper for the slide items and should not be used for each slide.
<div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div>
So:
<div class="carousel-inner" ><!-- Inner wrapper for slides --> @foreach($carousel as $index =>$image) <div class="item @if($index == '1'){{'active'}}@endif"> <!-- First item slider --> <img src="{{ url('images/photos').'/'.$image->photo_name}}"> <!-- First item background image slider --> <div class="carousel-caption overlay"> <div class="content"> <div class="text wow bounceIn animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-name: bounceIn; -webkit-animation-name: bounceIn;"> <h1>{{$image->category_name.' photography'}}</h1> </div> </div> </div> <!-- End first item background image slider --> </div> <!-- End first item slider --> @endforeach </div>