javascript - 多个图像 slider 1 个单页示例

Question

我正在尝试构建一个多图像 slider ，但问题是我无法同时显示 booth slider 。

我从 CodePen 中提取 slider

有一个带有 2 个 slider 的示例页面 Example .

 <ul class="slides">
   <input type="radio" name="radio-btn" id="img-1" checked />
     <li class="slide-container">
       <div class="slide">
(....)
</ul>     

 <ul class="slides">
   <input type="radio" name="radio-btn" id="img-1" checked />
     <li class="slide-container">
       <div class="slide">
(....)
</ul>

如果有人能帮助我就完美了!

Answer 1

你有两个问题:

1) 您需要每个 slider 的 radio 元素是唯一的(例如，两者不能都是 radio-btn)

2) 每个 slider 中的每个图像 (1-6) 共享相同的 id，这是无效的，因为 id 每页只能使用一次(例如你的每个 slider ，你的第一张图片都有 id="img-1")。

查看我的 JSFiddle更正您的代码。请注意两个 slider 现在是如何工作的？!呜呜呜!

我所做的就是将 -1 添加到第一个 slider 的元素，并将 -2 添加到第二个 slider 的所有元素!

例如第一个 slider

<input type="radio" name="radio-btn" id="img-2" checked />

成为

<input type="radio" name="radio-btn-1" id="img-1-2" checked />

例如第二个 slider

<input type="radio" name="radio-btn" id="img-5" checked />

成为

<input type="radio" name="radio-btn-2" id="img-2-5" checked />