在一个页面上多个幻灯片时，Unslider会中断

Question

我正在使用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>

有一个实时版本here，您可以在其中看到它在第一个版本中按预期工作 - 但是当您单击幻灯片继续移动到下一个幻灯片时，它会在第二个滑块上断开。

编辑：

我在SO here上发现了类似的问题，但我是JS新手，似乎无法理解什么解决方案适用于我。