▷ Crea un Slider Simple y Versátil con HTML, CSS y JavaScript: Manual y Automático.

Aprende a desarrollar un slider de imágenes o contenido completamente funcional utilizando solo HTML, CSS y JavaScript. En este tutorial paso a paso, te mostraremos cómo crear un slider que permita la navegación manual a través de botones y, además, la funcionalidad de desplazamiento automático entre diapositivas. Ideal para integrar en cualquier página web, este slider versátil se adapta a distintos tipos de contenido y es fácil de personalizar según tus necesidades de diseño. Sigue las instrucciones detalladas para crear una solución moderna y atractiva sin depender de frameworks externos.

Previsualización del slider:

Las imagenes de fondo que se muestran en el slider fueron tomadas de: https://unsplash.com/

El contenido del slider cambia cada cierto tiempo, también podemos hacer que cambie presionando las flechas que se encuentran en los laterales o los puntos que se encuentran en la parte inferior.

HTML:

En el documento HTML, tenemos un div con la clase: sllider-container; dentro del cual vamos a renderizar todos los elementos del slider.

<div class="slider-container"></div>

CSS:

Para las animaciones añadimos dos clases, las cuales las utilizaremos para animar el slider, cuando se pulse la flecha hacia la derecha, hacia la izquierda y cuando esté en el modo automático.

.slider-prev{
    animation: arrowPrev .3s;
    -webkit-animation: arrowPrev .3s;
}
.slider-next{
    animation: arrowNext .3s;
    -webkit-animation:arrowNext .3s;
}
@keyframes arrowPrev{
    0%{opacity:0;
        right:-100%;}
    20%{opacity:0.2;
        right:-80%;}
    40%{opacity:0.4;
        right:-60%;}
    60%{opacity:0.6;
        right:-40%;}
    80%{opacity:0.8;
        right:-20%;}
    100%{right:0%;
        opacity:1;}
}
@keyframes arrowNext{
    0%{opacity:0;
        left:-100%;}
    20%{opacity:0.2;
        left:-80%;}
    40%{opacity:0.4;
        left:-60%;}
    60%{opacity:0.6;
        left:-40%;}
    80%{opacity:0.8;
        left:-20%;}
    100%{left:0%;
        opacity:1;}
}

JavaScript

Creamos un array de objetos, cada objeto representa un item del slider y va a tener dos propiedades: title y src.

const sliderDb = [
  {
    title:"Titulo de ejemplo uno",
    src:"https://source.unsplash.com/random/?bussines"
  },
  {
    title:"Titulo de ejemplo dos",
    src:"https://source.unsplash.com/random/?tech"
  },
  {
    title:"Titulo de ejemplo tres",
    src:"https://source.unsplash.com/random/?cars"
  }
]

En el valor de la propiedad title escribimos el texto que queremos que aparezca en el slider y en el valor de la propiedad src, ponemos la url de la imagen que queremos de fondo.

Luego lo que hacemos es inyectar código HTML dentro del div: slider-container de la siguiente manera:

document.querySelector(".slider-container").innerHTML = `
    <div class = "slider-item"></div>
    <ul class = "pagination"></ul>
    <button class="arrow prev-item" ></button>
    <button class="arrow next-item" ></button>`

Con esto lo que hacemos es añadir el contenedor en donde se va a renderizar el contenido que ira cambiando, las flechas de avance y retroceso y los puntos que nos permiten desplazarnos a un item en concreto.

Después ejecutamos la función pagination(), en esta función lo que vamos a hacer es renderizar los puntos que se ven en la parte inferior del slider, dentro del elemento <ul> que tiene la clase: pagination.

function pagination(){
        sliderDb.forEach((e,index)=> {
            document.querySelector(".pagination").innerHTML += `<li><button class = "dot">${index}</button></li>`      
        }); 
    }

A continuación ejecutamos la función renderItem(), esta función recibe dos parámetros, state y dotIndex.

state, puede tener tres valores: "prev", "next" y null

dotIndex, valores numéricos de 0 al número de elementos a mostrar en el slider.

Ejecutamos la función renderItem() en cuatro circunstancias diferentes:

• Utilizando la función setInterval(), esto lo hacemos para que sea automático el cambio de item del slider

  setInterval(() => {(!isPaused) ? renderItem("next"):0}, 5000);

  La variable isPaused la utilizamos como bandera para que al momento de dar click sobre la flecha de avance, retrocesos o cualquiera de los puntos no se ejecute la función renderItem(). En este punto la variable es igual a falso, así que ejecutamos la función cada 5 segundos

• Al hacer click sobre la flecha de avance:

  document.querySelector(".next-item").addEventListener('click', function(){
    isPaused = true;
    renderItem("next");
    delay();     
  });

  Le asignamos a la variable isPaused el valor de true, esto para que se detenga el cambio automático de items del slider

  Le enviamos a la función el valor de "next".

  La función delay(); la utilizamos para que después de un tiempo el valor de la variable isPaused sea falso y así continuar el slide automático.

  const delay = ()=> setTimeout(function(){isPaused = false} , 6000);

• Al hacer click sobre la flecha de retroceso.

  document.querySelector(".prev-item").addEventListener('click', function(){
    isPaused = true;
    renderItem("prev");
    delay(); 
  });

  Hacemos lo mismo que en el caso anterior la única diferencia es que le enviamos a la función el valor de "prev".

• Al hacer click sobre un punto:

  document.querySelectorAll(".dot").forEach((e,dotIndex) =>{
    e.addEventListener("click", function(e){
      isPaused = true;
      renderItem(null,dotIndex);
      delay();
    })
  });

  Lo que hacemos aquí es, verificar que punto se pulso y le enviamos a la función dos parametro un null y el número de index del punto que se pulso.

function renderItem(state, dotIndex).

state, puede tener tres valores: "prev","next" y null.

dotIndex, valores numéricos de 0 al número de elementos a mostrar en el slider.

var animationClass = "";
(state == "next") ? itemIndex++ : itemIndex--;
(dotIndex != undefined) ? itemIndex = dotIndex : 0;
(itemIndex > sliderDb.length - 1) ? itemIndex  = 0 : 0;
(itemIndex < 0 ) ? itemIndex = sliderDb.length - 1 : 0;

Si el valor de state es igual a "next" sumamos una variable previamente definida: itemIndex. Caso contrario, state = "prev" y restamos itemIndex. Si el valor de state = "next" o diferente de null, le asignamos a la variable animationClass el valor "slider-next", caso contrario le asignamos el valor de "slider-prev".

Si el valor de la variable dotIndex es diferente de undefined: le asignamos ese valor a itemIndex. Si el valor de itemIndex es menor a 0, le asignamos el valor del último elemento del array sliderDb y si el valor es mayor al número de elementos que contiene el array, le asignamos el valor de 0 (primer elemento del array sliderDb), con esto lo que hacemos es que al terminar de mostrar todos los elementos en el slider, regrese al primer elemento y si esta en el elemento 0 muestre el último elemento.

La variable itemIndex la utilizamos luego para seleccionar elementos del array sliderDb.

Dentro del <div> que tiene la clase "slider-item" renderizamos el siguiente codigo HTML:

document.querySelector(".slider-item").innerHTML = `
    <div class = "item-background ${animationClass}" style = "background: url(${sliderDb[itemIndex].src}) no-repeat center/cover;"></div>
        <div class="item-title__container">
        <h2 class ="item-title__title">${sliderDb[itemIndex].title}</h2>
    </div>
`;

En el elemento con clase: item-background añadimos la imagen como background utilizando el atributo style, para ello accedemos a la propiedad src del array sliderDb. A este mismo elemento le añadimos la clase: "slider-next" o "slider-prev"; dependiendo del caso.

Dentro del elemento con clase: item-title__title; añadimos el título del item accediendo a la propiedad src del array sliderDb

Finalmente, cambiamos el background del elemento dot (punto) para identificar el elemento del slider que estamos visualizando.

Reppositorio del proyecto aquí: https://github.com/EstebanCarrilloG/simple-slider