var slider = document.getElementById('image-slider');
var slides = slider.querySelectorAll('div.image-slide');
var prevButton = slider.getElementsByClassName('prev-button')[0];
var nextButton = slider.getElementsByClassName('next-button')[0];
var pauseButton = slider.getElementsByClassName('pause-button')[0];
var slideIndex = 0;
var timer = null;

showSlide(slideIndex);

function showSlide(index) {
    if (index < 0) {
        index = slides.length - 1;
    } else if (index >= slides.length) {
        index = 0;
    }

    for (var i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
    }

    slides[index].style.display = 'block';
    slideIndex = index;
}

function nextSlide() {
    showSlide(slideIndex + 1);
}

function prevSlide() {
    showSlide(slideIndex - 1);
}

function pauseSlide() {
    if (timer) {
        clearInterval(timer);
        timer = null;
        pauseButton.value = 'Reproducir';
    } else {
        timer = setInterval(nextSlide, 8000);
        pauseButton.value = 'Pausar';
    }
}

nextButton.onclick = function () {
    nextSlide();
    if (timer) {
        clearInterval(timer);
        timer = setInterval(nextSlide, 8000);
    }
};

prevButton.onclick = function () {
    prevSlide();
    if (timer) {
        clearInterval(timer);
        timer = setInterval(nextSlide, 8000);
    }
};

pauseButton.onclick = function () {
    pauseSlide();
};

timer = setInterval(nextSlide, 8000);