CODEWITHSUNDEEP
jquerycarouselshopify
Erica Virtue
Erica Virtue

Reputation: 73

How do I make the carousel automatically scroll in this Shopify theme?

I have a carousel in this Shopify theme, and i am trying to edit it to make it automatically scroll to the next slide every 5 seconds (instead of having to click through to the next slide).

Here is what I'm using for the carousel:

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

Any ideas? I'm a bit stumped.

Thanks!

Upvotes: 2

Views: 4080

Answers (4)

Octavio Corral
Octavio Corral

Reputation: 1

If you'd like to make the scrolling stop after a button is clicked, be sure to add that setInterval into a variable then stop it on click with clearInterval. See code below.

var rotation = setInterval(function() { showSlide(current + 1) }, 7000);

        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));
                }
            }
            clearInterval(rotation);
            return false;
        }

Upvotes: 0

Arel
Arel

Reputation: 3938

The syntax is a bit off. This will do it:

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

and it should be placed further down in the code, so it is out of the nav.onclick block, but still in the original function. See example below. 

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

Upvotes: 1

Leo Newball
Leo Newball

Reputation: 31

Let me follow up with the last answer, because the idea is right. What you want to do is to create a self perpetuating loop. One way to do this is to call the slide function again at the end of the if statement that you have. To do this we're going to use setInterval(), with two parameters, the first is the function (while we're adding 1), and second time, in milliseconds (in this case we're going to set it to 10 seconds (10000 milliseconds).

Your code should look like something along these lines:

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

Upvotes: 3

bgetting
bgetting

Reputation: 268

This is just a matter of firing off the showSlide() method every five seconds, using something like setTimeout().

To get it to advance to the next slide, you would fire showSlide(current + 1).

Upvotes: 1

Related Questions