0

Hola a todos como estan: resulta que estoy trabajando un carousel el cual muestro imagenes que estan almacenadas en mi proyecto, y me funciona pero tengo el problema que solo me muestra una imagen, lo que necesito es que me muestre 3 imagenes, luego rote y me muestre 3 mas y asi consecutivamente, pero solo logro mostrar de a una imagen en cada vuelta del carousel...

En el controlador tengo definido asi:

$productos = Producto::latest('id')->paginate(3);

        return view('index', compact('posts', 'productos'));

y en la vista blade el codigo que tengo para el carousel:

  <div id="carouselProductos" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                  <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                  <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                  <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                  <div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
                  </div>

                    @foreach($productos as $producto)
                    <div class="carousel-item">
                        <img src="{{asset($producto->url_imagen_portada)}}">
                    </div>
                    @endforeach
                  </div>
    {{--               <div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
                  </div> --}}
                </div>
              <button class="carousel-control-prev" type="button" data-bs-target="#carouselProductos" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Anterior</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselProductos" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Siguiente</span>
                </button> 

Una imagen de como se ve (en rojo lo que quiero obtener, o sea las otras 2 imagenes) introducir la descripción de la imagen aquí

Saludos a todos

3
  • Buen día, si haces dd($productos) en el controlador, justo antes del return puedes ver más de un producto en tu arreglo? Las imágenes están todas guardadas en la misma ruta? La ruta que obtienes de tu base de datos es correcta? Commented el 19 feb. 2022 a las 2:48
  • Hola buenos dias, las imagenes estan todas en la misma ruta, de hecho si muestro las imagenes de forma individual se cargan todas, el problema es al querer mostrar mas de una en cada fila del carousel.... Commented el 19 feb. 2022 a las 17:32
  • funciona el carousel pero de a una imagen solamente, yo lo que necesito es que se muestren 3 iamgenes, luego rote a la proxima fila y se muestren 3 mas y asi Commented el 19 feb. 2022 a las 17:32

1 respuesta 1

0

Buen día,

Encontré un tutorial para hacer un carrusel con múltiples items

También encontré una forma que tal vez te pueda servir

El problema que tienes es que estas haciendo un foreach en el div que es el item del carrusel, pero lo que necesitas es poner 3 imágenes dentro del mismo item y de esa forma mostrar 3 imágenes al mismo tiempo

El método que te voy a mostrar no es perfecto (Se me acaba de ocurrir) así que tendrás que adaptar las fórmulas

Debes reemplazar tu foreach, actualmente lo tienes así:

@foreach($productos as $producto)
    <div class="carousel-item">
        <img src="{{asset($producto->url_imagen_portada)}}">
    </div>
@endforeach

Lo que vamos a hacer es iterar en las páginas que obtienes del método paginate() y luego iterar en los productos de cada página. Además vamos a utilizar clases de bootstrap para mostrar los elementos de forma correcta

@foreach(range(1, $productos->lastPage()) as $i)
    <div class="carousel-item d-flex row">
        @foreach(range(1, $productos->count()) as $j)
            <div class="col">
                <img src="{{asset($productos[(($i-1)*3)+$j]->url_imagen_portada)}}">
            </div>
        @endforeach
    </div>
@endforeach

Explicación:

En laravel no es posible utilizar el paginator para iterar en las páginas por lo que creamos un rango del total de páginas y lo utilizamos en el primer foreach. Esto nos va a dar un rango de 1 a ultimaPágina.

@foreach(range(1, $productos->lastPage()) as $i)

Como deseas utilizar múltiples elementos dentro de un carousel-item creamos el div en este nivel, es decir, en lo que vendría siendo el número de página

Dentro de la "página" que es el carousel-item necesitas X número de imágenes (Esto viene según lo que pongas en el paginator), en tu caso es 3

El método count() nos devuelve el total de elementos por página. Entonces creamos un rango de 1 al total de elementos por página y hacemos un for para crear las imágenes

@foreach(range(1, $productos->count()) as $j)

Ahora, para crear las imágenes necesitamos decirle a cada una el número de elemento que tiene dentro de $productos por lo que hacemos la siguiente operación

(($i-1)*3)+$j

Esto quiere decir:

$i es el número de página
$j es el número de elemento dentro de una página

Entonces para obtener el índice de los elementos de la primera página la formula nos daría los siguientes resultados con $i = 1 y $j tomando valores de 1 a 3

(($i-1)*3)+$j = x
((1-1)*3)+1 = 1
((1-1)*3)+2 = 2
((1-1)*3)+3 = 3

Para la segunda página, es decir, con $i = 2 y $j tomando valores de 1 a 3

(($i-1)*3)+$j = x
((2-1)*3)+1 = 4
((2-1)*3)+2 = 5
((2-1)*3)+3 = 6

Y así sucesivamente para todas las páginas

Esto te va a funcionar siempre y cuando el número de productos sea múltiplo de 3. Si el número de productos puede ser un valor que no sea múltiplo de 3 tendrías que modificar la fórmula o utilizar el método indicado en el tutorial que mencioné arriba

1
  • gracias por tu tiempo y tu ayuda, entiendo lo que me comentas, pero al intentar ejecutar me salta error: Trying to get property 'url_imagen_portada' of non-object Commented el 19 feb. 2022 a las 20:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.