I am currently working on creating a cycling sliding animation for a set of elements using two arrays:
var elms = [elm1, elm2, elm3];
var props = [{x,y,width,height,z-index,opacite,....}, {....}, {....}];
Initially, the elms will be positioned in the same order as the props:
elms[0] -> props[0];
emls[1] -> props[1];
elms[2] -> props[2];
However, I want to cycle them in a specific pattern:
elms[0] -> props[2]
elms[1] -> props[0]
elms[2] -> props[1]
and then:
elms[0] -> props[1]
elms[1] -> props[2]
elms[2] -> props[0]
and so forth...
I attempted to achieve this with the following code:
function index(n, array){
var m = n;
if(n > array.length){
m = n - array.lenth;
}else if(n < 0){
m = array.length + n;
}
return m;
}
var active = 0; //the front element
function slide(direction){
for (i=0; i< elms.length; i++)
{
elms[i] -> props[index(i - active, props)]
}
if(direction == 'fw'){
if(active++ => elms.length){
active = 0;
}else{
active++;
}
}else if(direction == 'bw'){
if(active-- < 0){
active += elms.length;
}else{
active--;
}
}
}
setInterval(function(){slide('fw')}, 3000);
The above code functions correctly, but I believe there might be a simpler and more efficient way to accomplish this cyclic movement. Has anyone come across a better solution that allows looping both forward and backward?