I have a very simple slider with jquery; it supports only one slider, and I want to make it support multiple sliders on the same page.
Example: Slider 1, Slider 2, Slider 3 etc. on the same page.
A working snippet is here working example.
I know I have to use each function—and I did—but it stopped working. I don't know where I am going wrong. This is what I tried; the code was too long, so I shortened it:
$('#slider').each(function() {
var current_slider = $(this);
//slider codes in here
});
Here is my complete code:
$(function(){
var Slider = 0;
$.Slider = function(total){
$("#indicator li").removeClass("active");
$("#image li").hide();
if (Slider < total -1){
Slider++;
$("#indicator li:eq("+Slider+")").addClass("active");
$("#image li:eq("+Slider+")").fadeIn("slow");
}else {
$("#indicator li:first").addClass("active");
$("#image li:first").fadeIn("slow");
Slider = 0;
}
}
var totalLi = $("#indicator li").length;
var interval = setInterval('$.Slider('+totalLi+')',5000);
$("#slider").hover(function(){
clearInterval(interval);
},function(){
interval = setInterval('$.Slider('+totalLi+')',5000);
});
$("#indicator li:first").addClass("active");
$("#image li").hide();
$("#image li:first").show();
$("#indicator li").hover(function(){
var indicators = $(this).index();
$("#indicator li").removeClass("active");
$(this).addClass("active");
$("#image li").hide();
$("#image li:eq("+indicators+")").fadeIn("slow");
Slider = indicators;
return true;
});
});
I don't want to repeat the same code for each slider.
I want it to support multiple sliders like this example; that example uses each function to get all the sliders, but it doesn't have mouseenter and mouseleave and indicators in it.
