Слайдер go для изображения при прокрутке страницы

Question

Я создал страницу, разделенную на 2: слева - прокручиваемый текст, а справа - липкая гладкая карусель с изображениями

Основная идея - прокручивать страницу и каждый текстовый блок слева который входит в половину области просмотра, изменит изображение на правой карусели. прокрутите вверх и вниз

вот код JS, который я использую:

$("#faded-gallery .carousel").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true
});

$(window).scroll(function () {
  let topOfWindow = $(window).scrollTop();
  let halfWindow = topOfWindow + $(window).height() / 2;

  $(".step:visible").each(function () {
    let textePos = $(this).offset().top;
    let cframe = $(this).attr("data-step");

    if (textePos <= halfWindow && textePos >= topOfWindow) {
      // $(this).addClass('animate');
      $("#faded-gallery .carousel").slick("slickGoTo", cframe);
      return false;
    } else {
      $(this).removeClass("animate");
    }
  });
});

Первая часть - это запуск карусели, а вторая часть - функция прокрутки
Я использую тип данных для соответствия индексу изображений карусели, называемых data-step
и slickGoTo , функция с помощью гладкого слайдера

Вот также панорама https://codepen.io/hamergil/pen/VwLjgKo

Работает нормально, но есть ошибка при более быстрой прокрутке вверх. он показывает разные изображения для каждого текстового блока. Может ли кто-нибудь помочь исправить эту ошибку? возможно, будет оценен лучший вариант кода

Спасибо