如何使此滑块代码适用于同一页面上的许多滑块

Question

I want to use this code to show not only just one slider but many dynamic sliders .see pic

this code just work for one slider

here is my code :

https://jsfiddle.net/4e13bmvu/

    <div id="le_le_slider" class="le_le_slider">
  <div class="wrapper">
    <div id="items" class="items">
      <span class="le_slide">le_slide 1</span>
      <span class="le_slide">le_slide 2</span>
      <span class="le_slide">le_slide 3</span>
      <span class="le_slide">le_slide 4</span>
      <span class="le_slide">le_slide 5</span>
    </div>
  </div>
  <a id="prev" class="control prev"></a>
  <a id="next" class="control next"></a>
</div>

Answer 1

In the JSFiddle code you've created: HTML has

<div id="le_le_slider" class="le_le_slider">

and Javascript points to it with 'getElementById'

var le_le_slider = document.getElementById('le_le_slider'),

Each slider needs it's own ID on the HTML page _ and to be controlled in the Javascript with the same ID

I cannot find any documentation online for the slider that you are using_ to point you to the instructions for how to code multiple LeLeSliders _

If this is the case then you should consider using a different slider which has the documentation connected to it that will help you create more than one slider _ Perhaps Slick Slider would suit your needs better >> https://kenwheeler.github.io/slick/

This link goes to a Codepen example of multiple Slick sliders in action on the same page >> https://codepen.io/glebkema/pen/bWRZzB