Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

Link to several sliders on the same page

byMR
August 22, 2022

I always used the script from this answer from @Sushanth — to slide images on single pages. It’s perfect.

The problem, it only works on one slider per page, now I’m in a project where I have to place different small sliders associated with buttons and obviously, it doesn’t work, or rather, only the first one works. It has taken me a long time to understand the script, as I have read in other answers, I guess it’s something about assigning a different ID to each slider, but I cannot find the solution.

In the example snippet, the round button links to the first slider, the one that works. The square button links to the second slider (with three slides) but it doesn’t work. Since sliders are links, each slider has its own set of next, prev, and close buttons.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel 

var $first = $('li:first', 'ul'),
  $last = $('li:last', 'ul');


// Have the first and last li's set to a variable
$("#next").click(function() {
  var $next,
    $selected = $(".selected");

  // get the selected item
  // If next li is empty , get the first
  $next = $selected.next('li').length ? $selected.next('li') : $first;
  $selected.removeClass("selected");
  $next.addClass('selected');
  // hides target       
  $('li').removeClass("linked");
});

$("#prev").click(function() {
  var $prev,
    $selected = $(".selected");

  // get the selected item
  // If prev li is empty , get the last
  $prev = $selected.prev('li').length ? $selected.prev('li') : $last;
  $selected.removeClass("selected");
  $prev.addClass('selected');
  // hides target       
  $('li').removeClass("linked");
});
* {
  text-decoration: none;
}

.pre,
.post,
.fstbutton,
.scndbutton,
.BACK {
  cursor: pointer;
  z-index: 1500;
  color: #C2C6D2;
  font-size: 3rem;
  margin-top: 3rem;
}

.fstbutton:before {
  font-family: 'Font Awesome 5 free';
  content: "\f111";
  font-weight: 900;
}

.scndbutton:before {
  font-family: 'Font Awesome 5 free';
  content: "\f0c8";
  font-weight: 900;
}

.pre:before {
  font-family: 'Font Awesome 5 free';
  content: "\f060";
  font-weight: 900;
}

.post:before {
  font-family: 'Font Awesome 5 free';
  content: "\f061";
  font-weight: 900;
}

.BACK:before {
  font-family: 'Font Awesome 5 free';
  content: "\f00d";
  font-weight: 900;
}


/* pop-up */

.popup {
  position: fixed;
  top: 0;
  padding-top: 2rem;
  width: 100%;
  height: 100%;
  display: none;
  text-align: center;
  background: #ecf0fa;
  z-index: 20;
  opacity: 1;
  overflow: hidden;
}

.popup:target {
  display: block;
  -webkit-animation-name: fadein 0, 2s;
  animation-name: fadein;
  animation-duration: 0.2s;
  height: 100%;
}


/*SLIDER*/

.SLIDER {
  position: absolute;
  top: -1.4rem;
  right: 7rem;
  display: flex;
  gap: 1.5rem;
}

li {
  display: none;
  width: fit-content;
  height: fit-content;
  padding: 1rem 2rem;
}

.selected,
.linked:last-child {
  display: block;
}


/*FIN SLIDER*/

.yl {
  background: yellow;
}

.br {
  background: brown;
}

.bl {
  background: blue;
}

.pi {
  background: pink;
}

.re {
  background: red;
}

.or {
  background: orange;
}

.cy {
  background: cyan;
}

.gr {
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<a class="fstbutton" href="#firstslider"></a>
<a class="scndbutton" href="#scndslider"></a>



<div id="firstslider" class="popup">
  <ul>
    <li class="linked yl">
      <h3>Yellow</h3>
    </li>
    <li class="linked bl">
      <h3>Blue</li>
    <li class="linked br">
      <h3>Brown</li>
    <li class="linked cy">
      <h3>Cyan</li>
    <li class="linked gr">
      <h3>Green</li>
  </ul>
  <div class="SLIDER">
    <div id="prev" class="pre"></div>
    <div id="next" class="post"></div>
    <div class="BACK" onClick="history.go(-1);return true;"></div>
  </div>
</div>


<div id="scndslider" class="popup">
  <ul>
    <li class="linked pi">
      <h3>Pink</h3>
    </li>
    <li class="linked re">
      <h3>Red</li>
    <li class="linked or">
      <h3>Orange</li>
  </ul>
  <div class="SLIDER">
    <div id="prev2" class="pre"></div>
    <div id="next2" class="post"></div>
    <div class="BACK" onClick="history.go(-1);return true;"></div>
  </div>
</div>

>Solution :

The easiest way is to bind click events using different IDs for prev and next element.

Here I used #prev2 and #next2, and duplicated your functions, limiting each set of buttons to #firstslider and #scndslider

var $first = $('#firstslider li:first'),
  $last = $('#firstslider li:last');

var $first2 = $('#scndslider li:first'),
  $last2 = $('#scndslider li:last');


// Have the first and last li's set to a variable
$("#next").click(function() {
  var $next,
    $selected = $("#firstslider .selected");

  // get the selected item
  // If next li is empty , get the first
  $next = $selected.next('li').length ? $selected.next('li') : $first;
  $selected.removeClass("selected");
  $next.addClass('selected');
  // hides target         
  $('li').removeClass("linked");
});

$("#prev").click(function() {
  var $prev,
    $selected = $("#firstslider .selected");

  // get the selected item
  // If prev li is empty , get the last
  $prev = $selected.prev('li').length ? $selected.prev('li') : $last;
  $selected.removeClass("selected");
  $prev.addClass('selected');
  // hides target         
  $('li').removeClass("linked");
});


// Have the first and last li's set to a variable
$("#next2").click(function() {
  var $next,
    $selected = $("#scndslider .selected");

  // get the selected item
  // If next li is empty , get the first
  $next = $selected.next('li').length ? $selected.next('li') : $first2;
  $selected.removeClass("selected");
  $next.addClass('selected');
  // hides target         
  $('li').removeClass("linked");
});

$("#prev2").click(function() {
  var $prev,
    $selected = $("#scndslider .selected");

  // get the selected item
  // If prev li is empty , get the last
  $prev = $selected.prev('li').length ? $selected.prev('li') : $last2;
  $selected.removeClass("selected");
  $prev.addClass('selected');
  // hides target         
  $('li').removeClass("linked");
});
* {
  text-decoration: none;
}

.pre,
.post,
.fstbutton,
.scndbutton,
.BACK {
  cursor: pointer;
  z-index: 1500;
  color: #C2C6D2;
  font-size: 3rem;
  margin-top: 3rem;
}

.fstbutton:before {
  font-family: 'Font Awesome 5 free';
  content: "\f111";
  font-weight: 900;
}

.scndbutton:before {
  font-family: 'Font Awesome 5 free';
  content: "\f0c8";
  font-weight: 900;
}

.pre:before {
  font-family: 'Font Awesome 5 free';
  content: "\f060";
  font-weight: 900;
}

.post:before {
  font-family: 'Font Awesome 5 free';
  content: "\f061";
  font-weight: 900;
}

.BACK:before {
  font-family: 'Font Awesome 5 free';
  content: "\f00d";
  font-weight: 900;
}


/* pop-up */

.popup {
  position: fixed;
  top: 0;
  padding-top: 2rem;
  width: 100%;
  height: 100%;
  display: none;
  text-align: center;
  background: #ecf0fa;
  z-index: 20;
  opacity: 1;
  overflow: hidden;
}

.popup:target {
  display: block;
  -webkit-animation-name: fadein 0, 2s;
  animation-name: fadein;
  animation-duration: 0.2s;
  height: 100%;
}


/*SLIDER*/

.SLIDER {
  position: absolute;
  top: -1.4rem;
  right: 7rem;
  display: flex;
  gap: 1.5rem;
}

li {
  display: none;
  width: fit-content;
  height: fit-content;
  padding: 1rem 2rem;
}

.selected,
.linked:last-child {
  display: block;
}


/*FIN SLIDER*/

.yl {
  background: yellow;
}

.br {
  background: brown;
}

.bl {
  background: blue;
}

.pi {
  background: pink;
}

.re {
  background: red;
}

.or {
  background: orange;
}

.cy {
  background: cyan;
}

.gr {
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<a class="fstbutton" href="#firstslider"></a>
<a class="scndbutton" href="#scndslider"></a>



<div id="firstslider" class="popup">
  <ul>
    <li class="linked yl">
      <h3>Yellow</h3>
    </li>
    <li class="linked bl">
      <h3>Blue</li>
    <li class="linked br">
      <h3>Brown</li>
    <li class="linked cy">
      <h3>Cyan</li>
    <li class="linked gr">
      <h3>Green</li>
  </ul>
  <div class="SLIDER">
    <div id="prev" class="pre"></div>
    <div id="next" class="post"></div>
    <div class="BACK" onClick="history.go(-1);return true;"></div>
  </div>
</div>


<div id="scndslider" class="popup">
  <ul>
    <li class="linked pi">
      <h3>Pink</h3>
    </li>
    <li class="linked re">
      <h3>Red</li>
    <li class="linked or">
      <h3>Orange</li>
  </ul>
  <div class="SLIDER">
    <div id="prev2" class="pre"></div>
    <div id="next2" class="post"></div>
    <div class="BACK" onClick="history.go(-1);return true;"></div>
  </div>
</div>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading