在FreeScroll模式下使用上一个/下一个按钮可在幻灯片上滚动

Question

我正在为图片库使用Flickity。我有一些带有多个大图像的幻灯片。幻灯片具有独特的宽度。我想使用Flickity中的Prev / Next箭头沿幻灯片滚动而不跳转到下一张幻灯片。

我看到“滚动”正在使用.flickity-slider上的translateX（）进行模拟，因此也许有可能在每次单击箭头时从该值中添加或减去〜30％？我试图通过jquery实现这一目标，但是我的技能却很差。

这是小提琴

$(document).ready(function ($) {

  var flky = new Flickity('.carousel', {
    // options, defaults listed

    accessibility: true,
    // enable keyboard navigation, pressing left & right keys

    adaptiveHeight: false,
    // set carousel height to the selected slide

    autoPlay: false,
    // advances to the next cell
    // if true, default is 3 seconds
    // or set time between advances in milliseconds
    // i.e. `autoPlay: 1000` will advance every 1 second

    cellAlign: 'left',
    // alignment of cells, 'center', 'left', or 'right'
    // or a decimal 0-1, 0 is beginning (left) of container, 1 is end (right)

    cellSelector: undefined,
    // specify selector for cell elements

    contain: false,
    // will contain cells to container
    // so no excess scroll at beginning or end
    // has no effect if wrapAround is enabled

    draggable: '>1',
    // enables dragging & flicking
    // if at least 2 cells

    dragThreshold: 3,
    // number of pixels a user must scroll horizontally to start dragging
    // increase to allow more room for vertical scroll for touch devices

    freeScroll: true,
    // enables content to be freely scrolled and flicked
    // without aligning cells

    selectedAttraction: 0.01,
    friction: 0.15,
    // lower attraction and lower friction
    // slower transitions
    // easier to flick past cells

    groupCells: false,
    // group cells together in slides

    initialIndex: 0,
    // zero-based index of the initial selected cell

    lazyLoad: true,
    // enable lazy-loading images
    // set img data-flickity-lazyload="src.jpg"
    // set to number to load images adjacent cells

    percentPosition: true,
    // sets positioning in percent values, rather than pixels
    // Enable if items have percent widths
    // Disable if items have pixel widths, like images

    prevNextButtons: true,
    // creates and enables buttons to click to previous & next cells

    pageDots: true,
    // create and enable page dots

    resize: true,
    // listens to window resize events to adjust size & positions

    rightToLeft: false,
    // enables right-to-left layout

    setGallerySize: true,
    // sets the height of gallery
    // disable if gallery already has height set with CSS

    watchCSS: false,
    // watches the content of :after of the element
    // activates if #element:after { content: 'flickity' }

    wrapAround: true,
    // at end of cells, wraps-around to first for infinite scrolling

    imagesLoaded: true

  });

});

.carousel-cell {
  display: flex;
  width: max-content;
}

<link href="https://unpkg.com/flickity@2.2.1/dist/flickity.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel">
        <div class="carousel-cell project">
          <figure>
            <img src="https://placehold.it/800x900" alt="">
          </figure>
          <figure>
            <img src="https://placehold.it/400x900" alt="">
          </figure>
          <figure>
            <img src="https://placehold.it/400x900" alt="">
          </figure>
        </div>

        <div class="carousel-cell project">
          <figure>
            <img src="https://placehold.it/800x900" alt="">
          </figure>
          <figure>
            <img src="https://placehold.it/400x900" alt="">
          </figure>

          <figure>
            <img src="https://placehold.it/400x900" alt="">
          </figure>

          <figure>
            <img src="https://placehold.it/400x900" alt="">
          </figure>

        </div>

        <div class="carousel-cell project">
          <figure>
            <img src="https://placehold.it/800x900" alt="">
          </figure>
          <figure>
            <img src="https://placehold.it/700x900" alt="">
          </figure>
        </div>
      </div>
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js"></script>

https://jsfiddle.net/6ycgbv14/