javascript - Darsain / Sly - 无限循环 - 第一张幻灯片应该出现在最后

Question

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

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

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

或者，也许您可​​以推荐任何其他类似的库来达到这里的结果

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