Sunday, 17 October 2021

How to add multiple slider support to simple jquery slider?

Hi guys I have a very simple slider with jquery, it supports only one slider, I want to turn it into support multiple sliders on same page.

Example : Slider 1, Slider 2, Slider 3 etc.. on same page.

A working sniped is here working example

I know I have to use each function and I did but it stopped working, I dont know where I am going wrong. this is what I tried the code was to long so I shortened it.

$('#slider').each(function() {
  var current_slider = $(this);
  //slider codes in here 
});

Here is my total codes :

$(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;   
   });  
});

Thanks for all helps

Update : I dont want to repeat same code for each slider. I want it support multiple sliders like this example, this example use each function to get all sliders, but it doesnt have mouseenter mouseleave and indicators in it.



from How to add multiple slider support to simple jquery slider?

No comments:

Post a Comment