Darsain / Sly - infinite loop - the first slide should apear at the end

user_8241390 0
Viewed 923

I have used Darsain/Sly (Github) to build a product slider. It works really nice but there is no functionality to make an infinite loop. On Github, I found the same reported issue.

Did anyone use this library and know how to add simple slides loop?

My idea is to use methods next(), prev(), add(), remove() from here and create own functions to do that.

Or maybe you can recommend any other similar library to achieve results as here

sly-scroller jquery javascript
1 Answers

I have played with the library a little more and I have found pretty much good trick to make an infinite loop. It's not a perfect solution for now, but can be a good base for someone who wants to use it.

Please see below code:

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