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

Question

我使用 Darsain/Sly ( Github ) 构建了一个产品 slider 。它工作得非常好，但没有进行无限循环的功能。在 Github 上，我发现了同样的报告问题。

有人使用过这个库并且知道如何添加简单的幻灯片循环吗？

我的想法是使用 here 中的 next()、prev()、add()、remove() 方法并创建自己的函数来做到这一点。

或者也许您可以推荐任何其他类似的库来实现 here 的结果

Answer 1

我对这个库进行了更多的研究，我发现了很多很好的技巧来进行无限循环。目前它还不是一个完美的解决方案，但对于想要使用它的人来说可以成为一个良好的基础。

请看下面的代码:

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();