¿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.
active
, pero no eliminas la otra. Creo que no deberías usar la clasehidden
y, por defecto, las imágenes no activas estarán ocultas.display:none
y otra con undisplay: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.