Дергается скролл при добавлении блока в начало списка

[indigo-rf]

Здравствуйте!

Я пытаюсь сделать вертикальный слайдер. Чтобы добиться эффекта бесконечной прокрутки я клонирую слайды с помощью .clone() Когда жмется кнопка Вперед, то клонируется первый слайд и ставится в конец. Когда жмется кнопка Назад, то - наоборот, клонируется последний слайд и ставится в начало. Клонируемые слайды, соответственно удаляются.

После клонирования я плавно смещаю скролл родителя:

container.stop().animate({scrollTop: shift});

Проблема: Когда жмем Вперед, удаляется первый слайд и ставится в конец. В этот момент происходит смещение скролла, а потом анимация. Выглядит это как рывок, а не как плавный скролл. При нажатии Назад все ровно и гладко.

Вот здесь код: https://jsfiddle.net/indigorf/d0m7zv8a/

Я уже перепробовал все, что в голову пришло, максимум чего добился, сделал еще хуже чем есть. Подскажите пожалуйста, как можно решить этот вопрос? Заранее спасибо!

[ksa]

Подскажите пожалуйста, как можно решить этот вопрос?

Придумать таки алгоритм при котором не происходит дерганья и все делается плавно...

Либо воспользоваться чем-то уже имеющимся.

[рони]

Вот здесь код

слишком много букв ... )))
ниже весь код целиком, обёртывать в $(function() {

}); нет необходимости.

$(window).on("load", function() {
  var container = $(".feedwrap__container");
  function nextSlide(e) {
    e.preventDefault();
    var slide = $(".slide:first", container), height = slide.outerHeight(true);
    container.stop().animate({scrollTop:height}, function() {
      container.append(slide);
      container.scrollTop(0);
    });
  }
  $(".feedwrap__next").on("click", nextSlide);
  function prevSlide(e) {
    e.preventDefault();
    var slide = $(".slide:last", container), height = slide.outerHeight(true);
    container.prepend(slide);
    container.scrollTop(height);
    container.stop().animate({scrollTop:0});
  }
  $(".feedwrap__prev").on("click", prevSlide);
});

[indigo-rf]

Спасибо за ответ! Ваш код работает, но есть нюанс.

Я только сейчас понял, что не написал об этом. Мне надо не просто скролить блоки, а чтобы активный блок был строго по центру родителя, а предыдущий и следующий обрезались поровну сверху и снизу. Вот скрин, как должно выглядеть: https://disk.yandex.ru/i/eolj7KemmfvYRA

И когда я пытаюсь добавить этот функционал в Ваш код, то все начинает дергаться, как и в моем коде.

Я вычисляю расстояние скролла таким образом:

var container = $(".feedwrap__container"),
    wrapHeight = $('.feedwrap').height(),
    activeSlideHeight = $('.feedwrap__container > .slide:first-child').outerHeight();

var shift = (wrapHeight - activeSlideHeight) / 4;

    container.stop().animate({scrollTop: shift});

Вычисляется почти правильно. Только shift выдается погрешность +/- 10px. Не критично на данный момент. Но вот при попытке отскролить до этого shift происходит рывок. И именно эту проблему я хочу решить.

[рони]

чтобы активный блок был строго по центру родителя,

https://jsfiddle.net/am54dgnv/