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>

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>