Link to several sliders on the same page-CodePudding

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.

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  href="#firstslider"></a>
<a  href="#scndslider"></a>



<div id="firstslider" >
  <ul>
    <li >
      <h3>Yellow</h3>
    </li>
    <li >
      <h3>Blue</h3></li>
    <li >
      <h3>Brown</h3></li>
    <li >
      <h3>Cyan</h3></li>
    <li >
      <h3>Green</h3></li>
  </ul>
  <div >
    <div id="prev" ></div>
    <div id="next" ></div>
    <div  onClick="history.go(-1);return true;"></div>
  </div>
</div>


<div id="scndslider" >
  <ul>
    <li >
      <h3>Pink</h3>
    </li>
    <li >
      <h3>Red</h3></li>
    <li >
      <h3>Orange</h3></li>
  </ul>
  <div >
    <div id="prev2" ></div>
    <div id="next2" ></div>
    <div  onClick="history.go(-1);return true;"></div>
  </div>
</div>

CodePudding user response：

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  href="#firstslider"></a>
<a  href="#scndslider"></a>



<div id="firstslider" >
  <ul>
    <li >
      <h3>Yellow</h3>
    </li>
    <li >
      <h3>Blue</li>
    <li >
      <h3>Brown</li>
    <li >
      <h3>Cyan</li>
    <li >
      <h3>Green</li>
  </ul>
  <div >
    <div id="prev" ></div>
    <div id="next" ></div>
    <div  onClick="history.go(-1);return true;"></div>
  </div>
</div>


<div id="scndslider" >
  <ul>
    <li >
      <h3>Pink</h3>
    </li>
    <li >
      <h3>Red</li>
    <li >
      <h3>Orange</li>
  </ul>
  <div >
    <div id="prev2" ></div>
    <div id="next2" ></div>
    <div  onClick="history.go(-1);return true;"></div>
  </div>
</div>