Создание карусели, которая скользит по мышке

Question

Я пытаюсь создать похожую карусель, подобную той, что есть на https://ueno.co/about/ (в разделе «значение»), которая прокручивается, когда пользователь продолжает прокручивать страницу вниз, а затем отображает дополнительную информацию под это путем добавления класса .show к скрытым элементам div, которые будут ниже.

До сих пор я использовал API Flickity и создал большую часть необходимых настроек.

Единственное, что отсутствует возможность прокручивать карусель с помощью колесика мыши, когда оно находится в фокусе (которое настраивается, когда пользователь прокручивает его).

Я предполагал, что смогу смоделировать левую и правую клавиши со стрелками нажмите, когда он находится в фокусе, который изменит каждый слайд, но если есть более чистый способ, я бы с радостью воспользовался этим.

jQuery(document).ready(function( $ ) {
  var $carousel = $('.js-carousel');
  $carousel.flickity({
    prevNextButtons: false,
    pageDots: false
  });
  // Split each word in the cell title into a span.
  var $cellTitle = $('.js-cell-title');

  // Wrap every letter in the cell title
  $cellTitle.each(function() {
    var $this = $(this);
    var letters = $this.text().split('');

    $this = $(this);
    $this.empty();

    $.each(letters, function(i, el) {
      $this.append($('<span class="text-split">')
        .append($('<span class="text-split__inner">')
          .text(el)));
    });
    // Dirty way of getting the whitespace
    var emptySplits = $this.find('.text-split__inner:contains( )');
    emptySplits.addClass('whitespace');
    emptySplits.parent().addClass('whitespace');
  });

  //focus the carousel when it is scrolled to
  $(window).scroll(function() {
    var carousel = $(".carousel");

   var carouselTop = $('.carousel').offset().top;
   var carouselHeight = $('.carousel').outerHeight();
   var windowHeight = $(window).height();
   var scrollTop = $(this).scrollTop();
   var isScrollMode = carousel.hasClass('scrollMode');
    var isInView = scrollTop > (carouselTop+carouselHeight-windowHeight) &&
                (carouselTop > scrollTop) && (scrollTop+windowHeight > carouselTop+carouselHeight);

    if(!isInView && isScrollMode){
      carousel.removeClass('scrollMode');
      carousel.blur();
      console.log('EXIT');
    } else if (!carousel.hasClass('scrollMode') && isInView){
        carousel.addClass('scrollMode');
        carousel.focus();
        //NEEDS FUNCTION TO SCROLL THE CAROUSEL
        console.log('ENTER');
       }
});

  //end of carousel event
  function carouselEnd() {
    var cells = $(".carousel-cell");
    var numberOfCells = cells.length;
    var lastCell = cells[numberOfCells - 1];
    if( lastCell.classList.contains('is-selected') ){
      //will add .show class to the hidden content
    }
  }

  $carousel.on( 'settle.flickity', function( event, pointer ) {
    carouselEnd();
  });

});

.carousel{
  .row{
    margin:0;
  }
  .carousel-cell {
    width: 66%;
    margin-right: 3rem;
  }

  .cell__wrap {
    width: 100%;
    margin: 0 auto;
  }

  .cell__inner {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }

  .cell__title {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
    margin: 0;
    transform: translateY(-50%) translateX(-20%);
  }

  .text-split {
    overflow: hidden;
    display: inline-block;
    &.whitespace {
      display: initial;
    }

    @for $i from 1 through 100 {
      &:nth-child(#{$i}) .text-split__inner {
        transition-delay: 0.02s * $i;
      }
    }
  }

  .text-split__inner {
    transform: translateY(100%);
    display: inline-block;
    transition: transform 0.3s ease;

    .is-selected & {
      transform: translateY(0);
    }

    &.whitespace {
      display: initial;
    }
  }

  .cell__thumb {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  // Base styles
  html,
  body {
    width: 100%;
    height: 100%;
    font-family: 'Work Sans', sans-serif;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    /* background-color: #00011D;
    color: #FFF; */
  }

  .container {
    width: 100%;
  }
}

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://unpkg.com/flickity@2.0/dist/flickity.pkgd.min.js"></script>
</head>

<section class="carousel">
  <div class="container a">
    <div class="carousel js-carousel">
      <div class="carousel-cell">
        <div class="cell__wrap">
          <div class="cell__inner">
            <img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
          </div>
          <div class="row">
              <h2>Title</h2>
          </div>
          <div class="row">
              <p> Here is the content</p>
          </div>
        </div>
      </div>
      <div class="carousel-cell">
        <div class="cell__wrap">
          <div class="cell__inner">
            <img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
          </div>
          <div class="row">
              <h2>Title</h2>
          </div>
          <div class="row">
              <p> Here is the content</p>
          </div>
        </div>
      </div>
      <div class="carousel-cell">
        <div class="cell__wrap">
          <div class="cell__inner">
            <img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
          </div>
          <div class="row">
              <h2>Title</h2>
          </div>
          <div class="row">
              <p> Here is the content</p>
          </div>
        </div>
      </div>
      <div class="carousel-cell">
        <div class="cell__wrap">
          <div class="cell__inner">
            <img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
          </div>
          <div class="row">
              <h2>Title</h2>
          </div>
          <div class="row">
              <p> Here is the content</p>
          </div>
        </div>
      </div>
      <div class="carousel-cell">
        <div class="cell__wrap">
          <div class="cell__inner">
            <img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
          </div>
          <div class="row">
              <h2>Title</h2>
          </div>
          <div class="row">
              <p> Here is the content</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>