Skip to main content
 首页 » 编程设计

javascript之Darsain/Sly之无限循环之第一张幻灯片应出现在末尾

2026年04月16日949think

我使用 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();