我正在尝试构建一个多图像 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>
如果有人能帮助我就完美了!
最佳答案
你有两个问题:
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 />
关于javascript - 多个图像 slider 1 个单页示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22001416/