Need some help with automatic slider

sebastiancoteanu1997 · January 5, 2016, 8:32pm

Hi Roy! I’ve finished the Flipboard lesson from “Make an interactive website” section and I tried to make that slider play automatically . I followed the instructions you gave in this post , but I didn’t make it .
Why I want is to have an auto-play slider and when I click an innactive .dot the slider should stop. If I click the .active-dot the slider should start again.
I will put my work below and I hope you have time to take a look at it. Have a good year !

var main= function(){
   
    $('.active-dot').click(function(){
    var int = self.setInterval(function(){
    $('.arrow-next').trigger('click');
    },5000);
    });
    
    var int = self.setInterval(function(){
    $('.arrow-next').trigger('click');
    },5000);
    
    $('.dropdown-toggle').click(function(){
        $('.dropdown-menu').toggle();
    });
    $('.arrow-next').click(function(){
        var currentSlide=$('.active-slide');
        var nextSlide=$('.active-slide').next();
        var currentDot=$('.active-dot')
        var nextDot=$('.active-dot').next();
        if(nextSlide.length==0){
            nextSlide=$('.slide').first();
            nextDot=$('.dot').first();
        }
        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');  
        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');
        
    });
    $('.arrow-prev').click(function(){
        var currentSlide=$('.active-slide');
        var prevSlide=$('.active-slide').prev();
        var currentDot=$('.active-dot');
        var prevDot=$('.active-dot').prev();
        if(prevSlide.length==0){
            prevSlide=$('.slide').last();
            prevDot=$('.dot').last();
        }
        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');
    });
    $('.dot').click(function(){
    window.clearInterval(int);
    return false;
    });
};
$(document).ready(main);

mtf · January 5, 2016, 8:29pm

It doesn’t look like the slider gets started. My completed version is self-starting. The approach I used was to remove everything from inside the ready wrapper except installing the event listeners, which need a fully loaded document to bind to. The rest of the program is made up of function modules that act as callbacks for the event handlers.

var main = function(){
  $(document)
    .on('click','.dropdown-toggle',dropDown)
    .on('click','.arrow-next',arrowNext)
    .on('click','.arrow-prev',arrowPrev);
  $('.slider-dots')
    .on('click','.dot',freeze)
    .on('click','.active-dot',rotate);
  rotate();                               // kick-start
};

$(main);

There should by rights be a closure for all of this, but for now it is all in global scope:

var int;
function rotate(){
    function next(){
        $('.arrow-next').trigger('click');
    }
    int = self.setInterval(next,5000);
}
function freeze(){
    window.clearInterval(int);
    return false;
}
function arrowNext() {
    var currentSlide = $('.active-slide');
    var nextSlide, nextDot;
    var currentDot = $('.active-dot');
    if ($('.slide').last().hasClass('active-slide')){
        nextSlide = $('.slide').first(); 
        nextDot = $('.dot').first();
    } else { 
        nextSlide = currentSlide.next();
        nextDot = currentDot.next();
    }
    currentSlide.slideUp(600).removeClass('active-slide');
    nextSlide.slideDown(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
}
function arrowPrev() {
    var currentSlide = $('.active-slide');
    var prevSlide, prevDot;
    var currentDot = $('.active-dot');
    if ($('.slide').first().hasClass('active-slide')){
        prevSlide = $('.slide').last();
        prevDot = $('.dot').last();
    } else { 
        prevSlide = currentSlide.prev();
        prevDot = currentDot.prev();
    }
    currentSlide.slideUp(600).removeClass('active-slide');
    prevSlide.slideDown(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');
}
function dropDown(){
    var currMen = $(this).siblings('.dropdown-menu');
    $('.dropdown-menu').not(currMen).hide();
    currMen.toggle();
}

The goal at this point would be to consider two things:

Closure
OOP