Question

0

410

Views

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

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.

over 4 years ago · Santiago Trujillo

3 answers

Answer question

0

here is the working demo but it still needs some update I keep working on code may this help you.

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

.slider-holder {
   width: 50%;
   height: 300px;
   float: left;
   position: relative;
   margin: 0 auto;
   overflow: hidden;
   border-radius: 5px;
   background-color: #000;
}

.slider-holder  ul, li {
   padding:0;
   margin:0;
   list-style:none;
}

.slider-holder .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

.carousel-prev {
  position: absolute;
  top: 50%;
  left: 30px;
  margin-top: -15px;
  z-index: 10;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.carousel-next {
  position: absolute;
  top: 50%;
  right: 30px;
  margin-top: -15px;
  z-index: 10;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}


.carousel-indicators {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  padding: 0;
  margin-right: 1%;
  margin-bottom: 10px;
  margin-left: 1%;
  list-style: none;
}
.carousel-indicators li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  text-indent: 0;
  cursor: pointer;
  background-color: rgba(15, 15, 20, 0.7);
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.9;
  transition: opacity 0.6s ease;
}

.carousel-indicators  li:hover, .carousel-indicators li.active {
  background-color: red;
}

.carousel-indicators1  {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  padding: 0;
  margin-right: 1%;
  margin-bottom: 10px;
  margin-left: 1%;
  list-style: none;
}
.carousel-indicators1  li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  text-indent: 0;
  cursor: pointer;
  background-color: rgba(15, 15, 20, 0.7);
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.9;
  transition: opacity 0.6s ease;
}

.carousel-indicators1  li:hover, .carousel-indicators1 li.active {
  background-color: red;
}
</style>
</head>
<body>
  <div class="slider-holder" id="slider">
         <ul class="image-slide" id="image" >
             <li>
               <div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
                 <div class="content">
                   <h1>Heading</h1>
                 </div>
               </div>
             </li>
             <li>
               <div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
                 <div class="content">
                   <h1>Heading</h1>
                 </div>
               </div>
             </li>
             <li>
               <div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
                 <div class="content">
                   <h1>Heading</h1>
                 </div>
               </div>
             </li>
             <li>
               <div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
                 <div class="content">
                   <h1>Heading</h1>
                 </div>
               </div>
             </li>
             <li>
               <div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
                 <div class="content">
                   <h1>Heading</h1>
                 </div>
               </div>
             </li>
         </ul>
         <ul class="carousel-indicators" id="buton">
           <li><span>1</span></li>
           <li><span>2</span></li>
           <li><span>3</span></li>
           <li><span>4</span></li>
           <li><span>5</span></li>
         </ul>
      </div>



<h1> Second slider </h1>
      <div class="slider-holder" id="slider1" style="width: 40%;float:right;">
         <ul class="image-slide" id="image1" >
             <li>
               <div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
                 <div class="content">
                   <h1>Heading</h1>
                 </div>
               </div>
             </li>
             <li>
               <div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
                 <div class="content">
                   <h1>Heading</h1>
                 </div>
               </div>
             </li>
             <li>
               <div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
                 <div class="content">
                   <h1>Heading</h1>
                 </div>
               </div>
             </li>
             <li>
               <div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
                 <div class="content">
                   <h1>Heading</h1>
                 </div>
               </div>
             </li>
             <li>
               <div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
                 <div class="content">
                   <h1>Heading</h1>
                 </div>
               </div>
             </li>
         </ul>
         <ul class="carousel-indicators1" id="buton">
           <li><span>1</span></li>
           <li><span>2</span></li>
           <li><span>3</span></li>
           <li><span>4</span></li>
           <li><span>5</span></li>
         </ul>
      </div>
<script>
 $(function(){    
var Slider = 0;
$.Slider = function(total){
   $(".carousel-indicators li").removeClass("active");
   $("#image li").hide();
   if (Slider < total -1){
       Slider++;
         $(".carousel-indicators li:eq("+Slider+")").addClass("active");
         $("#image li:eq("+Slider+")").fadeIn("slow");                                    
       }else {
         $(".carousel-indicators li:first").addClass("active");
         $("#image li:first").fadeIn("slow");    
         Slider = 0;    
       }
   }

   var totalLi = $(".carousel-indicators li").length;
   var interval = setInterval('$.Slider('+totalLi+')',5000);
   $("#slider").hover(function(){
      clearInterval(interval);
   },function(){
      interval = setInterval('$.Slider('+totalLi+')',5000);    
   });

   $(".carousel-indicators li:first").addClass("active");
   $("#image li").hide();
   $("#image li:first").show();
   $(".carousel-indicators li").hover(function(){
      var indicators = $(this).index();
      $(".carousel-indicators li").removeClass("active");
      $(this).addClass("active");
      $("#image li").hide();
      $("#image li:eq("+indicators+")").fadeIn("slow");                                   
      Slider = indicators;
      return true;   
   });  
  
  
  var Slider1 = 0;
$.Slider = function(total1){
   $(".carousel-indicators1 li").removeClass("active");
   $("#image1 li").hide();
   if (Slider1 < total1 -1){
       Slider1++;
         $(".carousel-indicators1 li:eq("+Slider1+")").addClass("active");
         $("#image1 li:eq("+Slider1+")").fadeIn("slow");                                    
       }else {
         $(".carousel-indicators1 li:first").addClass("active");
         $("#image1 li:first").fadeIn("slow");    
         Slider1 = 0;    
       }
   }

   var totalLi = $(".carousel-indicators1 li").length;
   var interval = setInterval('$.Slider('+totalLi+')',5000);
   $("#slider1").hover(function(){
      clearInterval(interval);
   },function(){
      interval = setInterval('$.Slider('+totalLi+')',5000);    
   });

   $(".carousel-indicators1 li:first").addClass("active");
   $("#image1 li").hide();
   $("#image1 li:first").show();
   $(".carousel-indicators1 li").hover(function(){
      var indicators1 = $(this).index();
      $(".carousel-indicators1 li").removeClass("active");
      $(this).addClass("active");
      $("#image1 li").hide();
      $("#image1 li:eq("+indicators1+")").fadeIn("slow");                                   
      Slider1 = indicators1;
      return true;   
   });  
  
});
</script>
</body>
</html>

over 4 years ago · Santiago Trujillo Report

0

   <html>
   <head>
   <title>Your slider in a simple web page</title>

   <style>
   body { background-color: #fff; color: #000; padding: 0; margin: 0; }
   .container { width: 900px; margin: auto; padding-top: 1em; }
   .container .ism-slider { margin-left: auto; margin-right: auto; }
   </style>

   <link rel="stylesheet" href="ism/css/my-slider.css"/>
   <script src="ism/js/ism-2.2.min.js"></script>

   </head>
   <body>
   <div class='container'>

   <div class="ism-slider" id="my-slider">
   <ol>
   <li>
  <img src="ism/image/slides/flower-729514_1280.jpg">
  <div class="ism-caption ism-caption-0">My slide caption text</div>
  </li>
  <li>
  <img src="ism/image/slides/beautiful-701678_1280.jpg">
  <div class="ism-caption ism-caption-0">My slide caption text</div>
  </li>
  <li>
  <img src="ism/image/slides/summer-192179_1280.jpg">
  <div class="ism-caption ism-caption-0">My slide caption text</div>
  </li>
  </ol>
  </div>
  <p class="ism-badge" id="my-slider-ism-badge"><a class="ism-link"
  href="http://imageslidermaker.com" rel="nofollow">generated with ISM</a></p>

  <section><h1>Your slider in a simple web page</h1>


  <p>This is a working example of your slider.</p>

  <p>To get your slider working in your web page add <em>my-slider.css</em>,    
  <em>ism-2.2.min.js</em> and the slide images to your project directory and paste 
  the markup into your HTML.</p>
  <p>Please see README.txt for more detailed instructions.</p>

  <p>* If your slider is not displayed correctly, please first make sure you have 
  fully extracted the contents of the zip file.</p>

  </section></div>
  </body>
  </html>

You can download css / images and javascript from here note : select slow download when you download the files for free download

over 4 years ago · Santiago Trujillo Report

0

Answer question

Find remote jobs

Accepted Answer · 2022-03-03T18:37:33.675Z

Simply use .closest() and .find() method to traverse through the current element which is hover . Then , you can use each loop to iterate through slider and get the index of current active li and depending on the position make next li active .

Demo Code :

$(function() {
  $.Slider = function(total) {
  //loop through all slider
    $(".slider-holder").each(function() {
      var index = $(this).find(".carousel-indicators .active").index() + 1; //get index of active ..class + 1 
      $(this).find(".carousel-indicators li").removeClass("active");
      $(this).find(".image-slide li").hide();
      if (index < total) {
        $(this).find(".carousel-indicators li:eq(" + index + ") ").addClass("active");
        $(this).find(".image-slide li:eq(" + index + ")").fadeIn("slow");
      } else {
        $(this).find(".carousel-indicators  li:eq(0)").addClass("active");
        $(this).find(".image-slide li:eq(0)").fadeIn("slow");
      }
    })
  }

  var totalLi = $(".slider-holder:eq(0) .carousel-indicators li").length;
  var interval = setInterval('$.Slider(' + totalLi + ')', 5000);
  $(".slider-holder").hover(function() {
    clearInterval(interval);
  }, function() {
    interval = setInterval('$.Slider(' + totalLi + ')', 5000);
  });

  $(".carousel-indicators li").hover(function() {
    var indicators = $(this).index();
    var selector = $(this); //current li hover...
    selector.closest(".carousel-indicators").find("li").removeClass("active"); // to add clas..
    selector.addClass("active");
    selector.closest(".slider-holder").find(" .image-slide > li").hide();
    selector.closest(".slider-holder").find(".image-slide > li:eq(" + indicators + ")").fadeIn("slow");
    return true;
  });
});

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

.slider-holder {
  width: 50%;
  height: 300px;
  float: left;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 5px;
  background-color: #000;
}

.slider-holder ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.slider-holder .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

.carousel-prev {
  position: absolute;
  top: 50%;
  left: 30px;
  margin-top: -15px;
  z-index: 10;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.carousel-next {
  position: absolute;
  top: 50%;
  right: 30px;
  margin-top: -15px;
  z-index: 10;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.carousel-indicators {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  padding: 0;
  margin-right: 1%;
  margin-bottom: 10px;
  margin-left: 1%;
  list-style: none;
}

.carousel-indicators li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  text-indent: 0;
  cursor: pointer;
  background-color: rgba(15, 15, 20, 0.7);
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.9;
  transition: opacity 0.6s ease;
}

.carousel-indicators li:hover,
.carousel-indicators li.active {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="slider-holder" id="slider">
  <ul class="image-slide" id="image">
    <li>
      <div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
  </ul>
  <ul class="carousel-indicators" id="buton">
    <li class="active"><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
  </ul>
</div>



<h1> Second slider </h1>
<div class="slider-holder" style="width: 40%;float:right;">
  <ul class="image-slide">
    <li>
      <div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
    <li>
      <div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
        <div class="content">
          <h1>Heading</h1>
        </div>
      </div>
    </li>
  </ul>
  <ul class="carousel-indicators">
    <li class="active"><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
  </ul>
</div>

0

410

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

3 answers

0

0

0

Find remote jobs

Andres GPT