Home / Questions / 30771
Accepted
Cidius
Asked: 2020-10-31 14:45:47 +0800 CST 2020-10-31 14:45:47 +0800 CST

Load a Carousel (bootstrap) with images in a collection

  • 772

I am wanting to display more than one image in an article, using a carousel. Yes or yes it shows one (main image), and with a limit of 5 photos

In itself the carousel is not the problem, the theme is the collection where I have the x images. Trying trial and error, I came to the conclusion that I need an active item. So I display the first image with first() and then it would loop through the collection, displaying the other images.

The problem is that I can't get the collection to move to the next object to start looping through.

From what I read collections don't have a next() or anything like that. Here I leave the code

<div id="mi-carousel" class="carousel slide">        

          <!-- Contenedor de los Slide -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="{{ asset('img/articulos/'.$articulo->imagenes->first()->nombre) }}" class="img-responsive" alt="" >
            </div>
                @foreach($articulo->imagenes as $imagen)                    
                    <div class="item">
                        <img src="{{ asset('img/articulos/'.$imagen->nombre) }}" alt="" class="img-responsive">
                    </div>
                @endforeach
        </div>

          <!-- Controloles -->
          <a class="left carousel-control" href="#mi-carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Anterior</span>
          </a>
          <a class="right carousel-control" href="#mi-carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Siguiente hidden-xs hidden-sd</span>
          </a>
    </div>

Just like this, it shows the first image 2 times

bootstrap

3 Answers

  1. Best Answer

    I show you two ways to make the first image appear only once:

    shift() method on a collection, which uses the first element of the collection and removes it from the collection:

            <div class="item active">
            <img src="{{ asset('img/articulos/'.$articulo->imagenes->shift()->nombre) }}" class="img-responsive" alt="" >
        </div>
            @foreach($articulo->imagenes as $imagen)                    
                <div class="item">
                    <img src="{{ asset('img/articulos/'.$imagen->nombre) }}" alt="" class="img-responsive">
                </div>
            @endforeach

    Using some way to determine the first element with "pure" php to add the active class:

                @foreach($articulo->imagenes as $index => $imagen)                    
                <div class="item @if($index == 0) active @endif">
                    <img src="{{ asset('img/articulos/'.$imagen->nombre) }}" alt="" class="img-responsive">
                </div>
            @endforeach
    • 1

  2. Hello, this solution is the correct one, I found it late, but it runs correctly without errors. I upload the two images, the one of the controller and how the slider looks, a $loop variable that the @foreach have is used to find the indexes and activate the field if it is the first.

    enter image description here enter image description here

    LOADING THE DRIVER SEARCHING FOR THE FILES

    enter image description here

    • 0

  3. Hello, I solve it from the controller, first I pass a query with a value and then I pass the one that carries all of them.

    public function index(){
    $slideruno=Slider::find(1);
    $sliders=Slider::orderBy('id','DESC')->get();
    // dd($slider);
    return view('sliders.slider',compact('sliders','slideruno'));
}

    and in the view it would look like this, I know it's not correct but it's the only way I found so far.

    <div class="carousel-item active">              
    <img class="d-block w-100" src="{{ Voyager::image( $slideruno->imagen ) }}" alt="First slide"> 
</div>

    enter image description here

    • -1