CODEWITHSUNDEEP
phplaravelcarousel
Vikash
Vikash

Reputation: 219

carousel is not working when using with loop

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>

Upvotes: 0

Views: 2843

Answers (2)

Fadhil Purnahar
Fadhil Purnahar

Reputation: 1

<!-- Slide -->
<div class="carousel-inner">
  @foreach($viewhomeslide as $key => $slider)
  <div class="carousel-item {{$key == 0 ? 'active' : '' }}">
    <img
      src="{{url('assets/img/slide/', $slider->imgslide)}}"
      class="d-block w-100"
      alt="..."
    />
    <div class="carousel-container">
      <div class="container">
        <h2 class="animate__animated animate__fadeInDown">
          <?= $slider ['title'] ?>
        </h2>
        <p class="animate__animated animate__fadeInUp">
          <?= $slider ['description']?>.
        </p>
        <a
          href="#about"
          class="btn-get-started animate__animated animate__fadeInUp scrollto"
          >Read More</a
        >
      </div>
    </div>
  </div>
  @endforeach
</div>

Upvotes: 0

John Svensson
John Svensson

Reputation: 392

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>

Upvotes: 3

Related Questions