我正在使用Unslider,并且我在一个页面上有多个滑块 - 所有滑块都具有相同的my-slider
. 如果通过点导航,滑块可以工作 - 但下一个和上一个按钮不起作用。
我的 JS 是:
jQuery(document).ready(function($) {
var slider = $('.my-slider').unslider({
arrows: false
});
slider.on('click', function() {
slider.unslider('next');
});
});
HTML:
<div class="my-slider">
<ul>
<li><img class="img-pad" src="img/cannes-bridge.jpg" alt=""></li>
<li><img class="img-pad" src="img/cannes-jean.jpg" alt=""></li>
<li><img class="img-pad" src="img/cannes-nis-1.jpg" alt=""></li>
<li><img class="img-pad" src="img/cannes-sam.jpg" alt=""></li>
<li><img class="img-pad" src="img/cannes-igor.jpg" alt=""></li>
</ul>
</div>
这里有一个实时版本,您可以在其中看到它在第一个滑块上按预期工作 - 但是当您单击幻灯片移动到下一个滑块时,它会在第二个滑块上中断。
编辑:
我在这里发现了一个类似的问题,但我是 JS 新手,似乎无法理解适用于我的解决方案。