Ad

Carousel In Laravel 4 Does Not Show As Expected

- 1 answer

I want to create an carousel slider using laravel and bootstrap.

Here is step I follow:

  1. Upload and save image to database => success.
  2. Loop throw the table to get image path from database then put it into carousel => success
  3. Display slider => Problem here. It is not problem of Js and Jquery. If I call the image by path, for example:

      {{ HTML::image('img/slides/1.jpg', '...') }}
    

I can slide throw images.

But when I put them in to an foreach loop, the image's displayed, but I can not slide throw them.

My Code

         @foreach($banners as $banner)

            <div class="carousel-inner">

               <div class="item active">
                 {{  HTML::image($banner->image, '...')}}
               </div>
            </div>

        @endforeach

why isn't this code working?

Thank you very much.

Ad

Answer

Your loop is creating multiple carousel-inner, that's wrong. You must have one carousel-inner and multiple item. OTOH you need to set to active just one item, not all of them.

Bootstrap Carousel example.

<div class="carousel-inner">
    @foreach($banners as $i => $banner)
        <div class="item{{ ($i) ? '' : ' active' }}">
            {{ HTML::image($banner->image, '...') }}
        </div>
    @endforeach
</div>
Ad
source: stackoverflow.com
Ad