What about the php view.blade.that loads the data into a Carousel bootstrap?

Asked

Viewed 100 times

1

I am trying to load the data dynamically from a mysql database, to a Carousel bootstrap, with Laravel 5.3. The following is happening: The data is loaded, but Carousel does not work, that is, it is static, with one image above the other. I believe it is a problem in the view, which then goes the code for better perception. I thank you in advance.

View home.blade.php

<div id="carousel-example-generic" class="carousel slide carousel-home" data-ride="carousel">


         <!-- Indicators -->
    <ol class="carousel-indicators">
        @foreach($noticia as $notic)
            {{--<li data-target="#carousel-example-generic" data-slide-to="{{$i}}"></li>--}}
            <li data-target="#carouselExampleIndicators" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
        @endforeach
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        @foreach($noticia as $item)
            <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                <img src="{{$item->imagem}}" alt="...">
                <div class="carousel-caption" style="background-color: rgba(4,162,183,0.9)">
                    <p><h3>{{$item->titulo}}</h3></p>
                </div>
            </div>

        @endforeach

    </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

Upshot

inserir a descrição da imagem aqui

1 answer

1

I found the solution!!! The problem was on this line:

<div class="carousel-item {{ $loop->first ? 'active' : '' }}">

The correct thing is:

<div class="item {{ $loop->first ? 'active' : '' }}">

removing Carousel-

Browser other questions tagged

You are not signed in. Login or sign up in order to post.