How can i add setInterval to the carousel slider?


#1

I would really like to know where do i have to insert the setInterval function in order to change slides automatically on a certain time interval.

setInterval ( function () {

}, 1000);

The code in question is the following:

    var main = function() {
        $('.dropdown-toggle').click(function() {
            $('.dropdown-menu').toggle();
        });
        $('.arrow-next').click(function() {
            var currentSlide = $('.active-slide');
            var nextSlide = currentSlide.next();
            
            var currentDot = $('.active-dot');
            var nextDot = currentDot.next();
            
            if ( nextSlide.length == 0 ) {
                nextSlide = $('.slide').first();
                nextDot = $('.dot').first();
            } 
            
            currentSlide.fadeOut(1300).removeClass('active-slide');
            nextSlide.fadeIn(1300).addClass('active-slide');
            
            currentDot.removeClass('active-dot');
            nextDot.addClass('active-dot');
        });
        $('.arrow-prev').click(function() {
            var currentSlide = $('.active-slide');
            var prevSlide = currentSlide.prev();
            
            var currentDot = $('.active-dot');
            var prevDot = currentDot.prev();
            
            if ( prevSlide.length == 0 ) {
                prevSlide = $('.slide').last();
                prevDot = $('.dot').last();
            }
            
            currentSlide.fadeOut(1300).removeClass('active-slide');
            prevSlide.fadeIn(1300).addClass('active-slide');
            
            currentDot.removeClass('active-dot');
            prevDot.addClass('active-dot');
        });
    }

$(document).ready(main);

#2

Hey Andreica,

Have you seen this read-only forum post? https://www.codecademy.com/forum_questions/5487363686f5520934000343
It seems to cover what you'd like to achieve.


#3

Yes. Thank you.
That's exactly what i was looking for.


#4

Now what if i would want to add the functionality of being able to go to the first slide by clicking on the first bullet, go to the second slide by clicking on the second bullet and so on ?
Is there an easy way to do this ?


#5

Well, just as a rough guess, you could give each slide an id (1, 2, 3, etc.), then give each dot an attribute like data-slide-num and set it to the same thing as the slide you want it associated with, then fade out all other slides and fade in that one slide on click. Not really sure if that'll work, though. I'll take a look at it later :)


#6

@boardrockstar19073 Sorry I took so long before working on this. I'll let you integrate it with the auto-moving stuff, but this takes you to the correct slide when you click a dot: http://codepen.io/Zystvan/pen/vNrawK


#7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.