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