我使用 Darsain/Sly ( Github ) 构建了一个产品 slider 。它工作得非常好,但没有进行无限循环的功能。在 Github 上,我发现了同样的报告问题。
有人使用过这个库并且知道如何添加简单的幻灯片循环吗?
我的想法是使用 here 中的 next()、prev()、add()、remove() 方法并创建自己的函数来做到这一点。
或者也许您可以推荐任何其他类似的库来实现 here 的结果
请您参考如下方法:
我对这个库进行了更多的研究,我发现了很多很好的技巧来进行无限循环。目前它还不是一个完美的解决方案,但对于想要使用它的人来说可以成为一个良好的基础。
请看下面的代码:
var slider = $('#smart'),
slide = slider.children('ul').eq(0),
wrap = slider.parent(),
options = {
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
scrollBy: 1,
pagesBar: wrap.find('.pages'),
activatePageOn: 'click',
speed: 1000,
elasticBounds: 1,
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
cycleBy: 'items'
};
var sly = new Sly(slider, options);
sly.on('change', function(eventName){
var clone = $(slide).find('li').first().html();
$(slide).append('<li>'+ clone + '</li>');
$(slide).find('li').first().remove();
this.slideTo(1);
});
sly.init();
