1window.onload = function () {
2    // Variables
3    const IMAGENES = [
4        'img/montanya.jpg',
5        'img/parque.jpg',
6        'img/palmeras.jpg'
7    ];
8    const TIEMPO_INTERVALO_MILESIMAS_SEG = 1000;
9    let posicionActual = 0;
10    let $botonRetroceder = document.querySelector('#retroceder');
11    let $botonAvanzar = document.querySelector('#avanzar');
12    let $imagen = document.querySelector('#imagen');
13    let $botonPlay = document.querySelector('#play');
14    let $botonStop = document.querySelector('#stop');
15    let intervalo;
16
17    // Funciones
18
19    /**
20     * Funcion que cambia la foto en la siguiente posicion
21     */
22    function pasarFoto() {
23        if(posicionActual >= IMAGENES.length - 1) {
24            posicionActual = 0;
25        } else {
26            posicionActual++;
27        }
28        renderizarImagen();
29    }
30
31    /**
32     * Funcion que cambia la foto en la anterior posicion
33     */
34    function retrocederFoto() {
35        if(posicionActual <= 0) {
36            posicionActual = IMAGENES.length - 1;
37        } else {
38            posicionActual--;
39        }
40        renderizarImagen();
41    }
42
43    /**
44     * Funcion que actualiza la imagen de imagen dependiendo de posicionActual
45     */
46    function renderizarImagen () {
47        $imagen.style.backgroundImage = `url(${IMAGENES[posicionActual]})`;
48    }
49
50    /**
51     * Activa el autoplay de la imagen
52     */
53    function playIntervalo() {
54        intervalo = setInterval(pasarFoto, TIEMPO_INTERVALO_MILESIMAS_SEG);
55        // Desactivamos los botones de control
56        $botonAvanzar.setAttribute('disabled', true);
57        $botonRetroceder.setAttribute('disabled', true);
58        $botonPlay.setAttribute('disabled', true);
59        $botonStop.removeAttribute('disabled');
60
61    }
62
63    /**
64     * Para el autoplay de la imagen
65     */
66    function stopIntervalo() {
67        clearInterval(intervalo);
68        // Activamos los botones de control
69        $botonAvanzar.removeAttribute('disabled');
70        $botonRetroceder.removeAttribute('disabled');
71        $botonPlay.removeAttribute('disabled');
72        $botonStop.setAttribute('disabled', true);
73    }
74
75    // Eventos
76    $botonAvanzar.addEventListener('click', pasarFoto);
77    $botonRetroceder.addEventListener('click', retrocederFoto);
78    $botonPlay.addEventListener('click', playIntervalo);
79    $botonStop.addEventListener('click', stopIntervalo);
80    // Iniciar
81    renderizarImagen();
82} 

1<div class="carousel">
2    <button id="retroceder">Retroceder</button>
3    <div id="imagen"></div>
4    <button id="avanzar">Avanzar</button>
5</div>
6<div class="controles">
7    <button id="play">Play</button>
8    <button id="stop" disabled>Stop</button>
9</div>

1.carousel {
2    max-width: 800px;
3    margin: 0 auto;
4    display: flex;
5}
6#imagen {
7    width: 100%;
8    height: 400px;
9    background-size: cover;
10}