Darsain / Sly - 无限循环 - 第一张幻灯片最后应该是apear

Question

我使用Darsain / Sly（Github）来构建产品滑块。它的工作非常好但是没有功能来制作无限循环。问题8存在同样的问题。

是否有人使用此库并知道如何添加简单的幻灯片循环？

我的想法是使用方法next（），prev（），add（），remove {）来自here并创建自己的函数来做到这一点。

或许你可以推荐任何其他的simmilar库来实现here

的结果

编辑

我已经更多地使用了库，我发现了一个非常好的技巧来制作无限循环。现在不是完美的解决方案，但对于想要使用它的人来说可能是一个很好的基础。

请参阅以下代码：

var $frame  = $('#smart');
var $slidee = $frame.children('ul').eq(0);
var $wrap   = $frame.parent();
var $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($frame, $options);

sly.on('change',function(eventName){
    var clone = $($slidee).find('li').first().html();
    $($slidee).append('<li>'+ clone + '</li>');
    $($slidee).find('li').first().remove();
    this.slideTo(1);
});

sly.init();

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