¿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.
