Infinite Cycle

Skip to first unread message

Jul 17, 2013, 9:03:21 AM7/17/13
Hi Sly,

Well done on an awesome plugin!

Just one question though, we've been trying to cycle the items infinitely in the basic slider, but we've failed in everything we do.

We went through your documentation a few times and we could not find anything related to an infinite cycle.

Could you perhaps steer us in the right direction.


Jul 17, 2013, 10:53:42 AM7/17/13
Infinite cycling is out of scope of this library. There is no support, or intent for it in Sly, and trying to implement it will just break things.

Creating a separate library that handles infinite cycling is on my to-do list, but I haven't even created a repo yet, so don't wait for it. It won't be any time soon :)

Implementing infinite cycling in Sly would be a bad idea since Sly is trying to solve a different problem, which has a different solutions. Infinite scrolling - which requires each item to be animated individually as opposed to Sly's animation of the container of the images - would unreasonably complicate the core & API of Sly.


Jul 22, 2013, 4:50:30 AM7/22/13
I've just realized that you may be talking about a different infinite scrolling :) So to clarify:

What is NOT supported:
Having 10 items and scrolling past 10th will reveal the 1st, creating an infinite loop of same items.

What IS supported:
Scrolling near the end loads more items, extending the SLIDEE content. This is demoed in here:

Jul 22, 2013, 5:05:50 AM7/22/13
No problem, you had it correct the first time :)

We were looking for an infinite loop on the same items.

But thank you for your reply, and thanks for an amazing plugin. It is by far the best I've worked with.

Message has been deleted

Feb 17, 2017, 5:03:32 AM2/17/17
to Sly.js,

Try this code:
// first add to image list two duplicates to start and end

var first = $('li:first', $(#myframe));
var last = $('li:last', $(#myframe));
var sly = new Sly($(#myframe), {
/// init own SLY
startAt: 1,///first start from second item
pageBuilder:/// pageBuilder will return nonvisible first and last bullet.
function (index) {
var total = $('li', $(#myframe)).length;
if(index == total-1 || index == 0){
return '<li style="display: none;">' + (index + 1) + '</li>';
return '<li>' + (index + 1) + '</li>';


// then make listener which replace last slide to second and first to prelast

sly.on('moveEnd' , function (eventName) {
var ty = sly.rel.activePage;
if(ty == 0 ||ty == sly.items.length-1){
var slided = 1;
if(ty == 0){
var slided = sly.items.length - 2 ;
var speed = sly.options.speed + '';
sly.options.speed = 0;
sly.options.speed = speed;

Reply all
Reply to author
0 new messages