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

Question

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

score 0 · Accepted Answer · answered Mar 18 '20 at 10:30

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

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

1 Answers1