时间戳

首页 > 解决方案 > How to make this code of slider work for many sliders on the same page

javascript - How to make this code of slider work for many sliders on the same page

问题描述

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

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>

标签： javascripthtmlcss

解决方案

在您创建的 JSFiddle 代码中：HTML 有

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

和 Javascript 用“getElementById”指向它

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

每个滑块都需要在 HTML 页面上拥有自己的 ID，并在 Javascript 中使用相同的 ID 进行控制

我无法在网上找到您正在使用的滑块的任何文档_指向您如何编写多个 LeLeSlider 的说明_

如果是这种情况，那么您应该考虑使用一个不同的滑块，该滑块具有与之连接的文档，这将帮助您创建多个滑块_也许 Slick Slider 会更好地满足您的需求>> https://kenwheeler.github.io/光滑/

此链接转到在同一页面上运行的多个 Slick 滑块的 Codepen 示例 >> https://codepen.io/glebkema/pen/bWRZzB

推荐阅读