Currently working on enhancing a slider functionality, and I have observed that everything is functioning smoothly -
function Slider(element) {
this.i = 0;
this.element = element;
var self = this;
this.timer = window.setInterval(function() {
switch (self.i) {
case 0:
$(element).velocity({ translateX: "-33.3333%" });
self.i++;
break;
case 1:
$(element).velocity({ translateX: "-66.6666%" });
self.i++;
break;
case 2:
$(element).velocity({ translateX: "0%" });
self.i = 0;
break;
}
}, 2000);
}
Slider.prototype.stop = function() {
window.clearInterval(this.timer);
}
var i = 0;
$(".multi").each( function(){
label = "label_" + i;
window[label] = new Slider($(this));
console.log(window[label]);
console.log(label);
console.log(i)
i++;
});
$(".multi-nav a").click( function(e){
e.preventDefault();
number = $(this).parent().attr("class").split(" ").pop();
label = "label_" + number;
console.log(label)
console.log(window[label]);
window[label].stop();
});
Check out the demo here - http://codepen.io/JordanDWhalen/pen/QjGNYm
However, I am currently working on adding animations to toggle classes on the targets of the events that stop the interval:
function Slider(element) {
this.i = 0;
this.element = element;
var self = this;
this.timer = window.setInterval(function() {
switch (self.i) {
case 0:
$(element).velocity({ translateX: "-33.3333%" });
$(".multi-nav a").velocity({ opacity: ".5" });
$(".multi-nav ." + self.i).velocity({ opacity: "1" });
self.i++;
break;
case 1:
$(element).velocity({ translateX: "-66.6666%" });
$(".multi-nav a").velocity({ opacity: ".5" });
$(".multi-nav ." + self.i).velocity({ opacity: "1" });
self.i++;
break;
case 2:
$(element).velocity({ translateX: "0%" });
$(".multi-nav a").velocity({ opacity: ".5" });
$(".multi-nav ." + self.i).velocity({ opacity: "1" });
self.i = 0;
break;
}
}, 2000);
}
Slider.prototype.stop = function() {
window.clearInterval(this.timer);
}
var i = 0;
$(".multi").each( function(){
label = "label_" + i;
window[label] = new Slider($(this));
console.log(window[label]);
console.log(label);
console.log(i)
i++;
});
$(".multi-nav a").click( function(e){
e.preventDefault();
number = $(this).parent().attr("class").split(" ").pop();
label = "label_" + number;
console.log(label)
console.log(window[label]);
window[label].stop();
});
See the updated demo here - http://codepen.io/JordanDWhalen/pen/RWoaYR