2

¿Cómo puedo hacer un image slider dinámico en Laravel? He podido mostrar la primera imagen y manetener las que le siguen "ocultas" pero no puedo hacer que al hacer clic en el botón la primera se "esconda" y que las que le siguen, que se vean:

<x-faro-posts-img-modal hash="faro-posts-img-modal-{{$post->id}}">

    <div class="slider-items">
        @foreach($post->images as $image)
        <div class="inset-0 flex items-center justify-between md:w-96 h-full mx-auto
                                            {{ $loop->first ? 'active' : 'hidden'}}">
            <img src="{{ $image->name }}" alt="gallery" class="h-full">
        </div>
        @endforeach
    </div>

    <div class="w-full absolute flex items-center justify-between">
        <x-left-chevron />

        <x-right-chevron />
    </div>
</x-faro-posts-img-modal>
    

Esto me permite ver la primer imagen pero no las demás cuando hago clic sobre el botón; para ver la primera usé la variable de $loop de Blade, pero ¿cómo puedo hacer que se vean las demás al presionar ese botón?

Este es mi Javascript:

var slides = document.querySelector('.slider-items').children;
var nextSlide = document.querySelector('.right-slide');
var prevSlide = document.querySelector('.left-slide');
var totalSlides = slides.length;
var index = 0;

nextSlide.onclick = function () {
     next("next");
}

prevSlide.onclick = function () {
     next("prev");
}

function next(direction) {

   if (direction == "next") {
        index++;
        if (index == totalSlides) {
            index = 0;
        }
   }

   else {
        if (index == 0) {
            index = totalSlides-1;
        }
        else {
            index--;
        }
    }

    for (i = 0; i < slides.length;i++) {
        slides[i].classList.remove("active");
    }

  slides[index].classList.add("active");     
}

La verdad es que no entiendo qué sucede con los demás divs cuando tengo ese $loop, ya que he tratado varias formas:

{{ $loop->index || $loop->iteration ? 'active' : 'hidden' }} 

O sea que tome en cuenta la primera iteración (la posición 0) y las que le siguen después de esa (posición 1) sean incluidas en el if. Esto lo tendría que llevar a cabo el botón porque es el que quita o pone la clase de active, pero esto ni siquiera muestra la primera imagen.

Otro camino ha sido:

Poner en el div hijo de .slider-items la clase .active, y en la imagen lo siguiente:

{{ $loop->remaining ? 'active' : 'hidden'}}

O sea que el primer hijo de slider-items tendrá la clase de .active y también consigo ver la primer foto del array, pero las imagenes después de esa no se pueden ver. He tratado estos y muchos otros caminos pero ninguno me ha dado resultado.

2
  • El problema es que solo asignas la clase active, pero no eliminas la otra. Creo que no deberías usar la clase hidden y, por defecto, las imágenes no activas estarán ocultas.
    – Triby
    el 21 mar. 2021 a las 1:51
  • Pero a que te refieres que por defecto no estarán ocultas? El problema está en que se siguen viendo sin esa clase. Por ejemplo en CSS necesitas 2 clases, una clase que tenga un display:none y otra con un display:block y así se puede tener un control sobre cuales se verán y cuales no. Necesito asignarle a un elemento un display none si no nunca se van a ocultar.
    – Eduardo
    el 21 mar. 2021 a las 2:27

1 respuesta 1

1

En tus estilos CSS, por defecto, vas a ocultar todos los elementos del slider; Con la propiedad display puedes lograrlo, pero no es la mejor opción si deseas aplicar animaciones, se usa > div en el selector para seleccionar solo los hijos directos:

/* Ocultar todos los elementos */
.slider-items > div {
    display:none;
}
/* Mostrar solo el que tenga la clase active */
.slider-items > div.active {
    display:block;
}

Al generar los elementos en el ciclo, asegúrate de asignar la clase active solo al primer elemento:

<div class="slider-items">
    @foreach($post->images as $image)
    <div class="inset-0 flex items-center justify-between md:w-96 h-full mx-auto
        {{ $loop->first ? 'active' : '' }}">
        <img src="{{ $image->name }}" alt="gallery" class="h-full">
    </div>
    @endforeach
</div>

La parte importante es {{ $loop->first ? 'active' : '' }} donde solo se asigna la clase al primer elemento y el resto queda con cadena vacía.

Con estos pequeños cambios tu slider va a funcionar correctamente.

7
  • No tenía un CSS para esto, osea que voy a necesitar un CSS. No me lo esperaba.
    – Eduardo
    el 21 mar. 2021 a las 2:49
  • Que bien pues esto si funciona pero resulta que tengo 2 posts y ambas tienen varias imágenes. Sólo en el primer set de fotos puedo avanzar o retroceder, el segundo no funciona.
    – Eduardo
    el 21 mar. 2021 a las 2:53
  • 1
    Eso es porque tu script está creado para tomar en cuenta solo un slider, no más.
    – Triby
    el 21 mar. 2021 a las 2:54
  • No sabía, existe alguna manera de hacerlo que funcione para un número ilimitado de sliders??
    – Eduardo
    el 21 mar. 2021 a las 2:56
  • 1
    Lo ideal sería crear una nueva pregunta. Más tarde la busco y, si tengo oportunidad, trataré de ayudarte a resolverlo.
    – Triby
    el 21 mar. 2021 a las 3:09

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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