Mobify carousel Infinite slider

97 Views Asked by At

I am using Mobify carousel. I want to make it as Infite slider. To do this I change JS code by

if (newIndex < 1) {
    newIndex = length;
} else if (newIndex > this._length) { 
    newIndex = 1;
}

But when I reached at last image then click on next it goes to first image by right to left. I want to make it Left to right for last image and right to left for first image. and it work as a Infinite loop

1

There are 1 best solutions below

0
On

I had resolved this for you, I will show you my test case... and then i will show you what i did to adjust it for you.

var len = 6;
for (var i = 0; i < 100; i++){
  console.log("value:", Number(i%len));
}

this shows just a loop, iterating over something of size 6, and resetting it back to 0, a continual loop forward. Similarly, in the other direction.

var len = 6;
for (var i = 100; i >= 0; i--){
  console.log("value:", Number(i%len));
}

So you can sort of get mod to work forward. for reverse, -1 would not mod with len to loop back to the end, so you could say:

var len = this._length;
newIndex%=len;
if(newIndex < 0){
  newIndex = len;
}

if there is an issue with len, then it means there is an issue with this._length which you defined. You need to make sure you understand that when there is an array of items, say: 6.... their indices are actually 0 through 5.

That could be a secondary issue as per your question.