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">❮</span>
<span class="abs-slider-next">❯</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">❮</span>
<span class="abs-slider-next">❯</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">❮</span>
<span class="abs-slider-next">❯</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">❮</span>
<span class="abs-slider-next">❯</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>