Adding Autoscroll to a JavaScript slider

Question

I have a simple problem I can't seem to figure out. I have a JavaScript slider in a site I'm working on . You need to manually click to the next image in this slider. I want to make the slider scroll through the images automatically. Here is the code, below that is what I've tried:

//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;
        }
    }
})();

I've tried adding setInterval(current+1, 10000); to the bottom block of code:

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);
}
})();

I'm really new to JavaScript, and can't figure out what I'm doing wrong. I'd really appreciate any help! Thanks.

Answer 1

You can't pass a value to setInterval, you have to pass a function to execute. Try this:

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

Regards

Answer 2

The other answer was close, and really helped me figure this out. The only problem was the syntax was a bit off.

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

The above is what eventually worked for me. So this is how it looked in the above code:

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);
})();

The next step is to figure out how to have the slider repeat back to the first slide once it reaches the last slide.

Thanks again to Andrea for the help!