Javascript carousel sencillo con controles y autoreproducción

3 minutos

Javascript

Muchas veces queremos matar moscas a cañonazos. Gastamos energías buscando y configurando diferentes plugins para hacer una tarea en Javascript que se puede resolver fácilmente con alguna líneas de código. En el siguiente ejemplo dejo un minimalista y sencillo Carousel (Slider) en Javascript puro (Sin JQuery), usando la moderna nomenclatura ES6.

Entre sus características:

  • Controles para cambiar a la siguiente o la anterior imagen.
  • Activar cambio automático.
  • Parar cambio automático.
  • Totalmente personalizable con CSS.

Demo

Código

El HTML es mínimo. Puede moverse independientemente cada elemento o cambiarse los textos. Solo debes mantener las ids.

<div class="carousel">
    <button id="retroceder">Retroceder</button>
    <div id="imagen"></div>
    <button id="avanzar">Avanzar</button>
</div>
<div class="controles">
    <button id="play">Play</button>
    <button id="stop" disabled>Stop</button>
</div>

El CSS solo esta de ejemplo para maquetarlo mínimamente. Estiliza a tu gusto.

.carousel {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
}
#imagen {
    width: 100%;
    height: 400px;
    background-size: cover;
}

Dentro del Javascript, solo hay 2 variables interesantes:

  • IMAGENES: Donde indicarás las rutas de tus imágenes. Entre comillas, terminando con una coma al final de la línea salvo el último elemento. En el ejemplo doy por hecho que están en una carpeta llamada img y que nos has puesto un nombre adecuado (sin espacios, acentos…).
  • TIEMPO_INTERVALO_MILESIMAS_SEG: Tiempo en milisegundos entre una imagen y otra.
window.onload = function () {
    // Variables
    const IMAGENES = [
        'img/montanya.jpg',
        'img/parque.jpg',
        'img/palmeras.jpg'
    ];
    const TIEMPO_INTERVALO_MILESIMAS_SEG = 1000;
    let posicionActual = 0;
    let $botonRetroceder = document.querySelector('#retroceder');
    let $botonAvanzar = document.querySelector('#avanzar');
    let $imagen = document.querySelector('#imagen');
    let $botonPlay = document.querySelector('#play');
    let $botonStop = document.querySelector('#stop');
    let intervalo;

    // Funciones

    /**
     * Funcion que cambia la foto en la siguiente posicion
     */
    function pasarFoto() {
        if(posicionActual >= IMAGENES.length - 1) {
            posicionActual = 0;
        } else {
            posicionActual++;
        }
        renderizarImagen();
    }

    /**
     * Funcion que cambia la foto en la anterior posicion
     */
    function retrocederFoto() {
        if(posicionActual <= 0) {
            posicionActual = IMAGENES.length - 1;
        } else {
            posicionActual--;
        }
        renderizarImagen();
    }

    /**
     * Funcion que actualiza la imagen de imagen dependiendo de posicionActual
     */
    function renderizarImagen () {
        $imagen.style.backgroundImage = `url(${IMAGENES[posicionActual]})`;
    }

    /**
     * Activa el autoplay de la imagen
     */
    function playIntervalo() {
        intervalo = setInterval(pasarFoto, TIEMPO_INTERVALO_MILESIMAS_SEG);
        // Desactivamos los botones de control
        $botonAvanzar.setAttribute('disabled', true);
        $botonRetroceder.setAttribute('disabled', true);
        $botonPlay.setAttribute('disabled', true);
        $botonStop.removeAttribute('disabled');

    }

    /**
     * Para el autoplay de la imagen
     */
    function stopIntervalo() {
        clearInterval(intervalo);
        // Activamos los botones de control
        $botonAvanzar.removeAttribute('disabled');
        $botonRetroceder.removeAttribute('disabled');
        $botonPlay.removeAttribute('disabled');
        $botonStop.setAttribute('disabled', true);
    }

    // Eventos
    $botonAvanzar.addEventListener('click', pasarFoto);
    $botonRetroceder.addEventListener('click', retrocederFoto);
    $botonPlay.addEventListener('click', playIntervalo);
    $botonStop.addEventListener('click', stopIntervalo);
    // Iniciar
    renderizarImagen();
} 

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo</title>
    <style type="text/css" media="screen">
        .carousel {
            max-width: 800px;
            margin: 0 auto;
            display: flex;
        }
        #imagen {
            width: 100%;
            height: 400px;
            background-size: cover;
        }
    </style>
    <script>
        window.onload = function () {
            // Variables
            const IMAGENES = [
                'img/montanya.jpg',
                'img/parque.jpg',
                'img/palmera.jpg'
            ];
            const TIEMPO_INTERVALO_MILESIMAS_SEG = 1000;
            let posicionActual = 0;
            let $botonRetroceder = document.querySelector('#retroceder');
            let $botonAvanzar = document.querySelector('#avanzar');
            let $imagen = document.querySelector('#imagen');
            let $botonPlay = document.querySelector('#play');
            let $botonStop = document.querySelector('#stop');
            let intervalo;

            // Funciones

            /**
             * Funcion que cambia la foto en la siguiente posicion
             */
            function pasarFoto() {
                if(posicionActual >= IMAGENES.length - 1) {
                    posicionActual = 0;
                } else {
                    posicionActual++;
                }
                renderizarImagen();
            }

            /**
             * Funcion que cambia la foto en la anterior posicion
             */
            function retrocederFoto() {
                if(posicionActual <= 0) {
                    posicionActual = IMAGENES.length - 1;
                } else {
                    posicionActual--;
                }
                renderizarImagen();
            }

            /**
             * Funcion que actualiza la imagen de imagen dependiendo de posicionActual
             */
            function renderizarImagen () {
                $imagen.style.backgroundImage = `url(${IMAGENES[posicionActual]})`;
            }

            /**
             * Activa el autoplay de la imagen
             */
            function playIntervalo() {
                intervalo = setInterval(pasarFoto, TIEMPO_INTERVALO_MILESIMAS_SEG);
                // Desactivamos los botones de control
                $botonAvanzar.setAttribute('disabled', true);
                $botonRetroceder.setAttribute('disabled', true);
                $botonPlay.setAttribute('disabled', true);
                $botonStop.removeAttribute('disabled');

            }

            /**
             * Para el autoplay de la imagen
             */
            function stopIntervalo() {
                clearInterval(intervalo);
                // Activamos los botones de control
                $botonAvanzar.removeAttribute('disabled');
                $botonRetroceder.removeAttribute('disabled');
                $botonPlay.removeAttribute('disabled');
                $botonStop.setAttribute('disabled', true);
            }

            // Eventos
            $botonAvanzar.addEventListener('click', pasarFoto);
            $botonRetroceder.addEventListener('click', retrocederFoto);
            $botonPlay.addEventListener('click', playIntervalo);
            $botonStop.addEventListener('click', stopIntervalo);
            // Iniciar
            renderizarImagen();
        } 
    </script>
</head>
<body>
    <div class="carousel">
        <button id="retroceder">Retroceder</button>
        <div id="imagen"></div>
        <button id="avanzar">Avanzar</button>
    </div>
    <div class="controles">
        <button id="play">Play</button>
        <button id="stop" disabled>Stop</button>
    </div>
</body>
</html>

Truco para cachear imágenes y evitar parpadeos

Tan solo deben declarar sus imágenes en el HTML con un display: none. Internamente las descargará el navegador y podrás pasar entre las imágenes de forma suave.

<img src="img/montanya.jpg" style="display: none">
<img src="img/parque.jpg" style="display: none">
<img src="img/palmeras.jpg" style="display: none">

No olvides dejar un comentario positivo si te ha gustado.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...