Чистое математическое решение для итерации круговой карусели

это не включает никакого кода для анимации, а также предполагает, что элемент carousel является родительским <ul> для <li>s.

Должно изменять индексы каждого <li> для каждого «хода». Все, что вам действительно нужно сделать, это переместить последний элемент в первую позицию или первый элемент в последнюю позицию (в зависимости от направления, в котором вы двигаетесь). Я также добавил timeout в 1 секунду, чтобы вы могли видеть, как он проходит.

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

Оказывается, анимация выглядит дерьмово, поэтому вместо этого я просто вычисляю конечную позицию (и в качестве бонуса это более эффективно):

$('li', carousel).each(function(k, v) {
  var li = $(v);

  var nextIdx = 0;

  if(direction === 'right') {
    nextIter = ((k + iterCount) > (numItems - 1)) ? ((k + iterCount) - numItems) : (k + iterCount);
  }
  else {
    nextIter = (k - iterCount) >= 0 ? (k - iterCount) : numItems - (iterCount - k);
  }

  _animateTo(li, nextIter, direction);
});