Javascript carousel sencillo con controles y autoreproducción

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 en Javascript puro (Sin JQuery), usando la moderna nomenclatura ES6.

Entre sus características:

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:

window.onload = function () {
    // Variables
    const IMAGENES = [
        'https://programadorwebvalencia.com/img/blog/2018/04/montanya.jpg',
        'https://programadorwebvalencia.com/img/blog/2018/04/parque.jpg',
        'https://programadorwebvalencia.com/img/blog/2018/04/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 = [
                'https://programadorwebvalencia.com/img/blog/2018/04/montanya.jpg',
                'https://programadorwebvalencia.com/img/blog/2018/04/parque.jpg',
                'https://programadorwebvalencia.com/img/blog/2018/04/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>

No olvides dejar un comentario positivo si te ha gustado.

Versión escritorio