карусель не работает при использовании с петлей

Question

карусель не работает при использовании с петлей

Я использую карусель для скольжения изображения. Когда я использовал статическое изображение, оно работало нормально, но когда я использовал его с данными из базы данных, он отображал только первый элемент, а не скользил. Когда я нажимаю на стрелку, она также не движется ни влево, ни вправо.

Мой код просмотра:

<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>

0

carousel laravel php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Див <div class="carousel-inner" role="listbox"> должен быть вне foreach, так как он является оберткой для элементов слайда и не должен использоваться для каждого слайда.

  <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>

Так:

<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>

0