carousel function centerCarouselOn(index, callback) { var items = $('li', carousel); var middleIdx = Math.floor(items.length / 2); var direction = null; var iterCount = 0; if(index === middleIdx) return; // if iterCount is positive, we are going right; else, we are going left iterCount = middleIdx - index; // this funciton gets called recursively until all moves are complete function moveCarousel() { if (iterCount===0) return; if (iterCount > 0) { // take the last element, prepend it to the carousel $('li', carousel).last().prependTo(carousel); iterCount--; } else if (iterCount < 0) { // take the first element, append it to the carousel $('li', carousel).first().appendTo(carousel); iterCount++; } // execute callback to apply css changes at each step callback(); // set a delay, then repeat. window.setTimeout(moveCarousel, 1000); } // start moving the carousel moveCarousel(iterCount); } function centerCarouselOn(index, callback) { var items = $('li', carousel); var numItems = carousel.children().length; var middleIdx = Math.floor(items.length / 2); var direction = null; var iterCount = 0; if(index === middleIdx) return; if(index > middleIdx) { direction = 'left'; iterCount = (index - middleIdx); } else { direction = 'right'; iterCount = (middleIdx - index); } $('li', carousel).each(function(k, v) { var li = $(v); // Here I need to iterate n places to the left or right // e.g: // direction = left, iterCount = 3 // Then each li by index would need this sequence: // 0: 6, 5, 4 // 1: 0, 6, 5 // 2: 1, 0, 6 // 3: 2, 1, 0 // 4: 3, 2, 1 // 5: 4, 3, 1 // 6: 5, 4, 3 (this one moves to center - index 3) if(direction === 'right') { for(var i = k; i < (k + iterCount); i++) { var thisIter = i; var nextIter = (++thisIter >= numItems) ? (thisIter - numItems) : thisIter; console.log(k + ': ' + nextIter); } } else { for(var i = k; i > (k - iterCount); i--) { var thisIter = i; var nextIter = (--thisIter < 0) ? (numItems + thisIter) : thisIter; console.log(k + ': ' + nextIter); } } }); }