2

Tengo un slider que me funciona para ver muchas imágenes esto actualmente sólo me funciona para 1 post, resulta que no sé cuantos más tenga y naturalmente necesito que funcione en todos los posts posibles.

Este es mi image slider en Javascript: gallery.js:

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");     
}

Y esta es mi vista:

<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
        slider-items {{ $loop->first ? 'active' : '' }}">
        <img 
            src="{{ $image->name }}" 
            alt="gallery" 
            class="h-full"
        >
    </div>
    @endforeach
</div>

Mediante la variable $loop de Blade es como le digo que la primer iteración del loop tendrá como verdadero la clase de .active, las demás estarán ocultas.

La clase ´´´.slider-items´´´ está en todas las iteraciones por default pero la clase .active estará navegando por todos los divs y entonces según mi CSS la imagen sólamente se verá cuando ambas (.active y .slider-items)esten juntas. Sólamente funciona para 1 post como dije y no sé que hacer para que a otros posts le puedan funcionar también el slider, que debería de cambiar en el Javascript? ¿Cuál es otra manera de escribir un image slider? Gracias

Edición, la parte del Modal, ¿en dónde se ven las imagenes?

Para mostrar las imágenes estoy utilizando un botón que inicia un modal. La función, show hace que pueda ver el contenido gracias a que esta lleva una variable:

<button
    onclick="$modals.show('faro-posts-img-modal-{{ $post->id }}')"
    class="bg-blue-100 border-2 border-blue-500 text-sm rounded-md p-1 text-blue-500 hover:bg-blue-500 hover:border-none hover:text-white transition ease-in-out"
>
    Mostrar
</button>

Este es el script, se despeja un "CustomEvent" y buscar la propiedad "hash":

<script>
    window.$modals = {
        show(hash) {
            window.dispatchEvent(
                new CustomEvent('modal', { 
                    detail: hash
                })
            );
        }
    }
</script>

Como hash es la propiedad que la función intenta buscar en las etiquetas del componente y así poder abrir las imágenes correspondientes con un post:

<x-faro-posts-img-modal hash="faro-posts-img-modal-{{$post->id}}">
@foreach loop
@endforeach
</x-faro-posts-img-modal>

Existe un problema al cerrar el modal ya que para cerrar también se necesita un atributo como "#".

En la etiqueta: <a href="#"> tengo este símbolo: &times; que es mi botón para poder cerrar el modal pero pasa que la URL ahora se ve así: http://tweety.test/faro#, esto ocasiona que cuando quiero abrir un nuevo modal y utilizar nuevamente el slider, no me permita poder ver las imágenes a menos que refresque la página.

Esta parte es el componente Blade:

        <div class="fixed inset-0 flex items-center justify-center w-72 h-64 m-auto md:h-auto md:w-auto md:max-w-3xl md:my-5 md:mx-5 md:mx-auto bg-white rounded-md shadow-md overflow-x-auto md:overflow-hidden">
            <a href="#" 
                class="absolute right-10 top-10 md:right-16 md:top-10 h-8 w-8 text-xl text-center flex items-center justify-center cursor-pointer hover:bg-gray-200 transition ease-in-out">
                &times;
            </a>
            
            {{$slot}}
            
        </div>

Es en la variable de {{$slot}} en donde se está incluyendo el foreach loop y en donde se aplica las clases del slider.

Edición 2, utilizo AlpineJS

Para atribuirle al mismo modal las propiedades de hash, y vincular los eventos para mostrar ó cerrar el mismo modal esta es la parte dentro del componente de Blade en donde se especifíca el comportamiento:

@props(['hash'])

<div 
    x-data="{show: false, hash: '{{ $hash }}'}" 
    x-show="show"
    x-on:modal.window="
        show = ($event.detail === hash);
    "
    @keydown.escape.window="show = false"
    @hashchange.window="
        show = (location.hash === '#{{$hash}}');
    "
>

1 respuesta 1

3

Precisamente, ayer me vi en la necesidad de actualizar un script de slider porque trabajaba con flex y no me gustaba la transición para volver al inicio, entonces decidí cambiarlo a posición absoluta y mostrar cada elemento por medio de una animación CSS (@keyframes).

Además de los nombres de clase para elementos y avance automático, en la lógica realmente no hay mucha diferencia con tu script actual.

La parte importante, que lo hace funcionar con más de 1 slider es no usar variables globales y almacenar los datos necesarios en propiedades personalizadas, aunque lo ideal sería con atributos de datos.

Teniendo un elemento HTML, perfectamente puedes asignar una nueva propiedad, por ejemplo:

// Obtener elemento por ID
let ele = document.querySelector('#element');
// Asignar propiedad personalizada
ele.nuevaPropiedad = 'valor deseado';

Sabiendo que esto funciona, se agregan propiedades para almacenar los elementos que pertenecen a cada slider y el índice del elemento que se está mostrando actualmente.

Es muy importante tener un contenedor que tenga medidas específicas (ancho y alto) para asegurar el funcionamiento correcto. Lo ideal es tener una clase para el contenedor, pero puedes especificar los estilos directamente en la etiqueta, por ejemplo:

<div style="width:300px; height:200px; margin:20px auto;">

Este script es algo muy sencillo, supone que ya tienes creados los botones de anterior / siguiente y, adicionalmente, cuenta con algunas opciones de configuración:

  • Manual o automático: Si la etiqueta del slider tiene atributo data-manual="true" solo habrá movimiento con el uso de los botones, de lo contrario, el avance será automático
  • Tiempo entre elementos: Si el slider es automático y la etiqueta tiene atributo data-timing="--tiempo--", cada elemento se mostrará durante e tiempo especificado en --tiempo--, que puede ser en segundos o milisegundos, de acuerdo a la documentación. Por defecto, se aplicará tiempo de medio segundo 0.5s o 500ms
  • Animar el primer elemento al inicializar si es que la etiqueta no contiene estilo con left:0;

const absSlider = function() {
    // Función para mostrar siguiente elemento
    // * action == 1 avanza
    // * action == -1 retrocede
    this.show = (sl, action) => {
        // Solo si es automático
        if(!sl.manual) {
            // Limpiar temporizador para evitar comportamiento no deseado
            clearTimeout(sl.timer);
        }
        // Calcular siguiente movimiento
        let next = sl.index + action;
        // Permitir reproducción infinita
        if(next < 0) {
            next = sl.items.length - 1;
        } else if(next >= sl.items.length) {
            next = 0;
        }
        // ¿Actual sale hacia la izquierda o a la derecha?
        let class1 = (action == 1) ? 'abs-to-left' : 'abs-to-right';
        // ¿Siguiente entra desde izquierda o derecha?
        let class2 = (action == 1) ? 'abs-from-right' : 'abs-from-left';
        // Mover actual y ocultar
        sl.items[sl.index].style.animation = `${class1} ${sl.timing} forwards 0s 1`;
        // Mover siguiente y mostrar
        sl.items[next].style.animation = `${class2} ${sl.timing} forwards 0s 1`;
        // Actualizar índice de elemento actual
        sl.index = next;
        if(!sl.manual) {
            // Avanzar solo si es automático
            sl.timer = setTimeout(this.show, 5000, sl, 1);
        }
    };
    // Obtener todos los contenedores de slider
    this.sliders = document.querySelectorAll('.abs-slider');
    if(this.sliders.length == 0) {
        // No se encontraron sliders, salir
        return;
    }
    // Recorrer sliders para activar
    this.sliders.forEach(sl => {
        // ¿Ya se había activado este slider?
        if(sl.items) {
            // No activar nuevamente
            return;
        }
        // El primer elemento es el que estará activo
        sl.index = 0;
        // Obtener elementos
        sl.items = sl.querySelectorAll(':scope > .abs-slider-container');
        // Obtener botones anterior y siguiente
        sl.buttons = sl.querySelectorAll('.abs-slider-prev, .abs-slider-next');
        // Ocultar botones hasta saber si se deben mostrar
        sl.buttons.forEach(btn => btn.style.display = 'none');
        // Solo si el slider contiene elementos
        if(sl.items) {
            // Obtener tiempo entre elementos
            sl.timing = sl.dataset.timing || '500ms';
            // Posicionar primer elemento
            if(!sl.items[0].style.left) {
                sl.items[0].style.animation = `abs-from-right ${sl.timing} forwards 0s 1`;
            }
            // Si hay más de un elemento
            if(sl.items.length > 1) {
                // Determinar avance automático o manual
                sl.manual = (sl.dataset.manual && sl.dataset.manual == 'true');
                if(!sl.manual) {
                    // Inicializar si es automático
                    sl.timer = setTimeout(this.show, 5000, sl, 1);
                }
                // Mostrar botones anterior / siguiente
                sl.buttons.forEach(btn => btn.style.display = 'block');
                // Asignar evento a botones
                sl.buttons[0].addEventListener('click', () => { this.show(sl, -1); });
                sl.buttons[1].addEventListener('click', () => { this.show(sl, 1); });
            }
        }
    });
};
// Inicializar cuando se cargue el DOM
document.addEventListener('DOMContentLoaded', absSlider);
.abs-slider {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
    margin:0;
    padding:0;
}
.abs-slider .abs-slider-container {
    position:absolute;
    top:0;
    left:100%;
    width:100%;
    height:100%;
    overflow:hidden;
    background-color:var(--aqua1);
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
}
.abs-slider-prev, .abs-slider-next {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    display:block;
    opacity:0.6;
    width:45px;
    height:45px;
    line-height:45px;
    font-size:35px;
    text-align:center;
    color:#fff;
    background:rgba(0,0,0,0.3);
    cursor:pointer;
    border-radius:50%;
    text-shadow:3px 3px 5px rgba(0,0,0,0.5);
}
.abs-slider-prev:hover, .abs-slider-next:hover { opacity:1; }
.abs-slider-prev { left:10px; }
.abs-slider-next { right:10px; }
@keyframes abs-from-left {
    0% { left:-100%; }
    100% { left:0; }
}
@keyframes abs-from-right {
    0% { left:100%; }
    100% { left:0; }
}
@keyframes abs-to-left {
    0% { left:0; }
    100% { left:-100%; }
}
@keyframes abs-to-right {
    0% { left:0; }
    100% { left:100%; }
}
/* Aquí tus estilos personalizados */
/* Por ejemplo: imagen al 100% */
.abs-slider .abs-slider-container img {
    display:block;
    width:100%;
    margin:0 auto;
}
Primer slider no es automático y tiene un contenedor externo, puede tener estilos directamente o, mejor aún, por medio de una clase.
<div style="width:300px; height:200px; margin:20px auto;">
    <div class="abs-slider" data-timing="700ms" data-manual="true">
        <div class="abs-slider-container"><img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png"></div>
        <div class="abs-slider-container"><img src="https://homepages.cae.wisc.edu/~ece533/images/tulips.png"></div>
        <div class="abs-slider-container"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png"></div>
        <span class="abs-slider-prev">&#10094;</span>
        <span class="abs-slider-next">&#10095;</span>
    </div>
</div>

El segundo es automático, no tiene un contenedor padre (no recomendado, pero funciona), con tiempo de 700ms entre cada elemento y el primer elemento aparece fijo al inicio, sin animación.
    <div class="abs-slider" style="width:400px; height:200px; margin:20px auto;" data-timing="700ms">
        <!-- Fijar primer elemento con style="left:0;" -->
        <div class="abs-slider-container" style="left:0;"><img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png"></div>
        <div class="abs-slider-container"><img src="https://homepages.cae.wisc.edu/~ece533/images/tulips.png"></div>
        <div class="abs-slider-container"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png"></div>
        <span class="abs-slider-prev">&#10094;</span>
        <span class="abs-slider-next">&#10095;</span>
    </div>

Para que trabaje con tu plantilla solo hay que hacer algunos cambios, el primero es agregar el contenedor con medidas específicas, las que tú quieras, el slider se va a adaptar y, de preferencia, usando una clase en lugar de estilos directamente en la etiqueta.

Aparte, solo asegúrate de que el div del slider tiene clase abs-slider y los hijos abs-slider-container, así como tener los botones con sus respectivas clases abs-slider-prev y abs-slider-next. Ya no es necesario asignar clase al primer elemento, el script automáticamente hará que se muestre.

<div style="width:300px; height:200px; margin:20px auto;">
    <div class="abs-slider">
    @foreach($post->images as $image)
        <div class="inset-0 flex items-center justify-between md:w-96 h-full mx-auto abs-slider-container">
            <img src="{{ $image->name }}" alt="gallery" class="h-full">
        </div>
    @endforeach
        <span class="abs-slider-prev">&#10094;</span>
        <span class="abs-slider-next">&#10095;</span>
    </div>
</div>

Nota: Para los botones anterior / siguiente yo uso la etiqueta <span> y caracteres específicos, pero puedes modificarlos a tu gusto, solo conserva los nombres de clase y, de ser necesario, modifica el CSS para cambiar su apariencia.

En caso de que quieras que el primer elemento se muestre directamente al inicio, sin animación, solo agrega el estilo en la etiqueta:

<div class="inset-0 flex items-center justify-between md:w-96 h-full mx-auto
    slider-items" {{ $loop->first ? 'style="left:0;"' : '' }}">

Todo el código Javascript incluye comentarios para que sepas cómo funciona cada cosa, pero no dudes en preguntar si algo no quedó claro.

Aplicar a elementos cargados por AJAX

Después de que cargues el nuevo contenido solo ejecuta la función absSlider();, que volverá a buscar sliders para activar, ignorando los que se hayan activado previamente.

Importante: Primero debes eliminar completamente el anterior para poder activar el siguiente. Supongo que bastará con eliminar el HTML del contenedor y agregar el nuevo. De no ser así, por favor edita la pregunta para agregar el código que usas para cargar nuevos sliders.

// Definir contenido, tal como lo recibirías por AJAX
let sliderHtml = `<div class="abs-slider">
        <div class="abs-slider-container"><img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png"></div>
        <div class="abs-slider-container"><img src="https://homepages.cae.wisc.edu/~ece533/images/tulips.png"></div>
        <div class="abs-slider-container"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png"></div>
        <span class="abs-slider-prev">&#10094;</span>
        <span class="abs-slider-next">&#10095;</span>
    </div>`;
// Elemento donde se va a cargar el slider
let slider = document.querySelector('#slider');
// Cargar contenido dinámico
document.querySelector('#cargar').addEventListener('click', () => {
    // Limpiar contenido actual
    slider.innerHTML = '';
    // setTimeout para "simular" petición por AJAX
    setTimeout(() => {
        // Asignar nuevo contenido, deberías recibirlo por AJAX en lugar de usar la variable
        slider.innerHTML = sliderHtml;
        // Activar slider
        absSlider();
    }, 500);
});

const absSlider = function() {
    // Función para mostrar siguiente elemento
    // * action == 1 avanza
    // * action == -1 retrocede
    this.show = (sl, action) => {
        // Solo si es automático
        if(!sl.manual) {
            // Limpiar temporizador para evitar comportamiento no deseado
            clearTimeout(sl.timer);
        }
        // Calcular siguiente movimiento
        let next = sl.index + action;
        // Permitir reproducción infinita
        if(next < 0) {
            next = sl.items.length - 1;
        } else if(next >= sl.items.length) {
            next = 0;
        }
        // ¿Actual sale hacia la izquierda o a la derecha?
        let class1 = (action == 1) ? 'abs-to-left' : 'abs-to-right';
        // ¿Siguiente entra desde izquierda o derecha?
        let class2 = (action == 1) ? 'abs-from-right' : 'abs-from-left';
        // Mover actual y ocultar
        sl.items[sl.index].style.animation = `${class1} ${sl.timing} forwards 0s 1`;
        // Mover siguiente y mostrar
        sl.items[next].style.animation = `${class2} ${sl.timing} forwards 0s 1`;
        // Actualizar índice de elemento actual
        sl.index = next;
        if(!sl.manual) {
            // Avanzar solo si es automático
            sl.timer = setTimeout(this.show, 5000, sl, 1);
        }
    };
    // Obtener todos los contenedores de slider
    this.sliders = document.querySelectorAll('.abs-slider');
    if(this.sliders.length == 0) {
        // No se encontraron sliders, salir
        return;
    }
    // Recorrer sliders para activar
    this.sliders.forEach(sl => {
        // ¿Ya se había activado este slider?
        if(sl.items) {
            // No activar nuevamente
            return;
        }
        // El primer elemento es el que estará activo
        sl.index = 0;
        // Obtener elementos
        sl.items = sl.querySelectorAll(':scope > .abs-slider-container');
        // Obtener botones anterior y siguiente
        sl.buttons = sl.querySelectorAll('.abs-slider-prev, .abs-slider-next');
        // Ocultar botones hasta saber si se deben mostrar
        sl.buttons.forEach(btn => btn.style.display = 'none');
        // Solo si el slider contiene elementos
        if(sl.items) {
            // Obtener tiempo entre elementos
            sl.timing = sl.dataset.timing || '500ms';
            // Posicionar primer elemento
            if(!sl.items[0].style.left) {
                sl.items[0].style.animation = `abs-from-right ${sl.timing} forwards 0s 1`;
            }
            // Si hay más de un elemento
            if(sl.items.length > 1) {
                // Determinar avance automático o manual
                sl.manual = (sl.dataset.manual && sl.dataset.manual == 'true');
                if(!sl.manual) {
                    // Inicializar si es automático
                    sl.timer = setTimeout(this.show, 5000, sl, 1);
                }
                // Mostrar botones anterior / siguiente
                sl.buttons.forEach(btn => btn.style.display = 'block');
                // Asignar evento a botones
                sl.buttons[0].addEventListener('click', () => { this.show(sl, -1); });
                sl.buttons[1].addEventListener('click', () => { this.show(sl, 1); });
            }
        }
    });
};
.abs-slider {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
    margin:0;
    padding:0;
}
.abs-slider .abs-slider-container {
    position:absolute;
    top:0;
    left:100%;
    width:100%;
    height:100%;
    overflow:hidden;
    background-color:var(--aqua1);
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
}
.abs-slider-prev, .abs-slider-next {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    display:block;
    opacity:0.6;
    width:45px;
    height:45px;
    line-height:45px;
    font-size:35px;
    text-align:center;
    color:#fff;
    background:rgba(0,0,0,0.3);
    cursor:pointer;
    border-radius:50%;
    text-shadow:3px 3px 5px rgba(0,0,0,0.5);
}
.abs-slider-prev:hover, .abs-slider-next:hover { opacity:1; }
.abs-slider-prev { left:10px; }
.abs-slider-next { right:10px; }
@keyframes abs-from-left {
    0% { left:-100%; }
    100% { left:0; }
}
@keyframes abs-from-right {
    0% { left:100%; }
    100% { left:0; }
}
@keyframes abs-to-left {
    0% { left:0; }
    100% { left:-100%; }
}
@keyframes abs-to-right {
    0% { left:0; }
    100% { left:100%; }
}
/* Aquí tus estilos personalizados */
/* Contenedor con medidas fijas */
#slider {
    width:300px;
    height:200px;
    margin:20px auto;
}
/* Imagen al 100% */
.abs-slider .abs-slider-container img {
    display:block;
    width:100%;
    margin:0 auto;
}
<div id="slider"></div>
<button id="cargar">Cargar slider</button>

7
  • Hola en este momento estoy aplicando el código te agradezco el tiempo y esfuerzo que le dedicaste a la respuesta, en cuanto sepa si me funcionó (que lo más probable que sí, te marco la respuesta como "aceptada") saludos y muchas gracias.
    – Eduardo
    Commented el 22 mar. 2021 a las 16:30
  • Gracias, pues en teoría si funciona el código gracias! A pesar de que algunas imagenes no se oculten del todo ya que por ejemplo si avanzas hasta la imagen 3, y después ya que la tienes enfrente, le das clic otra vez en el botón para avanzar, la mitad de la imagen se queda en la pantalla (no se oculta del todo) otra cosa rara que cuando me salgo del modal tengo que refrescar la página, si no hago esto otro set de fotos no se podrá ver. Gracias!
    – Eduardo
    Commented el 22 mar. 2021 a las 17:21
  • Gracias, @triby estoy en ello.
    – Eduardo
    Commented el 22 mar. 2021 a las 17:51
  • Volví a actualizar la pregunta explicando la parte del Modal. Ya me funciona el modal, puedo ver las imagenes de ambos post sin que se vea cortada o tener una imagen encima de la otra, estoy viendo si mejor quito el botón para poder cerrar el modal, sigo leyendo tu actualización ya que no entiendo bien cómo volver a ejecutar la función. Simplemente le agrego absSlider()al final del Javascript? Tengo otra duda si eres tan amable, se necesita iniciar el slider en cuanto el DOM esté listo? Fue una de las cosas que me brinco, entiendo que no sabías del Modal, pense que no importaría.
    – Eduardo
    Commented el 22 mar. 2021 a las 18:50
  • Creo que debo de verificar esta parte porque el problema está en el hash, para abrir un nuevo modal necesito no tener nada. Habra manera de refrescar la página al cerrar el modal? Intente cambiar la ruta dentro del href a la página actual pero no funciona del todo.
    – Eduardo
    Commented el 22 mar. 2021 a las 19:06

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.