Добавление автопрокрутки к слайдеру JavaScript

Question

У меня есть простая проблема, которую я не могу понять. У меня есть слайдер JavaScript на сайте, над которым я работаю. Вам нужно вручную нажать на следующее изображение в этом слайдере. Я хочу, чтобы слайдер автоматически прокручивал изображения. Вот код, ниже это то, что я пробовал:

//Carousel interaction
(function() {
    if (document.getElementById('carousel-nav')) {
        var slides = document.getElementById('carousel-images'),
            slidesItems = slides.getElementsByTagName('li'),
            nav = document.getElementById('carousel-nav'),
            navItems = nav.getElementsByTagName('li'),
            current = 0;

        function showSlide(i) {
            if (i != current && slidesItems[i]) {
                slide = slidesItems[i];
                slide.className += ' show';
                setTimeout (function() {
                    slide.className = slide.className.replace('show', 'appear');                    
                }, 1);
                setTimeout(function() {
                    slidesItems[current].className = slidesItems[current].className.replace('current', '');
                    slide.className = slide.className.replace('appear', 'current');
                    current = i;
                }, 300);
                navItems[i+1].className += ' current';
                navItems[current+1].className = navItems[current+1].className.replace('current', '');
                if (i == 0) {
                    if (navItems[0].className.indexOf('disabled') == -1) {
                        navItems[0].className += ' disabled';
                    }
                } else {
                    navItems[0].className = navItems[0].className.replace(' disabled', '');
                }
                var l = navItems.length - 1;
                if (i == slidesItems.length - 1) {
                    if (navItems[l].className.indexOf('disabled') == -1) {
                        navItems[l].className += ' disabled';
                    }
                } else {
                    navItems[l].className = navItems[l].className.replace(' disabled', '');
                }
            }
        }   

        nav.onclick = function(e) {
            e = e || window.event; e = e.target || e.srcElement;
            e = getParentByTagName(e, 'A');
            if (e) {
                var action = e.getAttribute('data-action');
                if (action == 'prev') {
                    showSlide(current - 1);
                } else if (action == 'next') {
                    showSlide(current + 1);
                } else {
                    showSlide(parseInt(action));
                }
            }
            return false;
        }
    }
})();

Я пытался добавить setInterval(current+1, 10000); к нижнему блоку кода:

nav.onclick = function(e) {
        e = e || window.event; e = e.target || e.srcElement;
        e = getParentByTagName(e, 'A');
        if (e) {
            var action = e.getAttribute('data-action');
            if (action == 'prev') {
                showSlide(current - 1);
            } else if (action == 'next') {
                showSlide(current + 1);
            } else {
                showSlide(parseInt(action));
            }
        }
        return false;
    }

    setInterval(current+1, 10000);
}
})();

Я действительно плохо знаком с JavaScript и не могу понять, что я делаю неправильно. Буду очень признателен за любую помощь! Благодарю.

Answer 1

Другой ответ был близок и действительно помог мне понять это. Единственная проблема заключалась в том, что синтаксис был немного выключен.

setInterval(function() {
            showSlide(current + 1)
        },5000);

Выше это то, что в итоге сработало для меня. Вот как это выглядит в приведенном выше коде:

nav.onclick = function(e) {
        e = e || window.event; e = e.target || e.srcElement;
        e = getParentByTagName(e, 'A');
        if (e) {
            var action = e.getAttribute('data-action');
            if (action == 'prev') {
                showSlide(current - 1);
            } else if (action == 'next') {
                showSlide(current + 1);
            } else {
                showSlide(parseInt(action));
            }
        }
        return false;
    }

}
    setInterval(function() { showSlide(current + 1) }, 5000);
})();

Следующий шаг - выяснить, как сделать так, чтобы слайдер повторялся до первого слайда, как только он достиг последнего слайда.

Еще раз спасибо Андреа за помощь!

Answer 2

Вы не можете передать значение в setInterval, вы должны передать функцию для выполнения. Попробуй это:

setInterval('showSlide(current + 1);', 10000);

С уважением