Load a Carousel (bootstrap) with images in a collection

Navigation
1

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

In case the carousel is not the problem, the theme is the collection where I have the x images. Trying trial and error, come to the conclusion that I need an active item. So I show the first image with first () and then I would go through the collection, showing the other images.

The problem is that I can not make the collection move to the next object to start tracing it

So I read the collections do not have a next () or something 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

    
asked by Cidius 30.10.2016 в 23:45
source

3 answers

1

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

Method shift () in a collection, which uses the first element of it 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 of determining 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
    
answered by 31.10.2016 / 01:34
source
0

Hello this solution is the correct afternoon to find it but it runs correctly without errors I upload the two images, the controller and how is the slider, we use a variable $ loop that have the @foreach to find the index and activate the field if it is the first.

enter the description of the image here

LOADING THE DRIVER SEARCHING FOR FILES

    
answered by 20.09.2018 в 00:00
-1

Hello, what solutions from the controller first I pass a query with a value and then I pass the one that takes all. 

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 be like that, I know it's not the right thing to do, but it's the only way I found it until now. 

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

    
answered by 19.09.2018 в 21:42
Major and minor positions of an array As valid the curp in the renapo to get name and surname [closed]