javascript - 如何在初始化后禁用 Flickity slider 的自动播放？

Question

我想从我用 Flickity 制作的图像 slider 开始，并将 autoPlay 选项设置为 true。一段时间后我想禁用该设置。这样做的原因是因为我对 slider 的配置非常复杂，我只是想确保用户知道它们是如何工作的，然后允许他们随意使用它们。我知道 slider 在悬停时会停止自动播放，但这并不是我想要的。我尝试使用 setTimeout() 函数来处理此问题，但没有成功。

LINK TO SIMILAR ISSUE ON FLICKITY GIT REPOSITORY

HTML:

<div class="top-carousel top-carousel-food">
  <div class="carousel-cell">
        {{ 'food--1.jpg' | asset_url | img_tag }}  
  </div>
  <div class="carousel-cell">
        {{ 'food--2.jpg' | asset_url | img_tag }}  
  </div>
  <div class="carousel-cell">
        {{ 'food--3.jpg' | asset_url | img_tag }}  
  </div>
  <div class="carousel-cell">
        {{ 'food--4.jpg' | asset_url | img_tag }}  
  </div>
  <div class="carousel-cell">
        {{ 'food--5.jpg' | asset_url | img_tag }}  
  </div>
  <div class="carousel-cell">
        {{ 'food--6.jpg' | asset_url | img_tag }}  
  </div>
</div>
<div class="bottom-carousel bottom-carousel-food">
  <div class="carousel-cell">
        {{ 'food--1.jpg' | asset_url | img_tag }}  
  </div>
  <div class="carousel-cell">
        {{ 'food--2.jpg' | asset_url | img_tag }}  
  </div>
  <div class="carousel-cell">
        {{ 'food--3.jpg' | asset_url | img_tag }}  
  </div>
  <div class="carousel-cell">
        {{ 'food--4.jpg' | asset_url | img_tag }}  
  </div>
  <div class="carousel-cell">
        {{ 'food--5.jpg' | asset_url | img_tag }}  
  </div>
  <div class="carousel-cell">
        {{ 'food--6.jpg' | asset_url | img_tag }}  
  </div>
</div>

jQuery:

$( document ).ready(function() {

        $('.top-carousel-food').flickity({
            // options
            cellAlign: 'left',
            contain: true,
            lazyLoad: true,
            sync: '.bottom-carousel-food'
        });

        $('.bottom-carousel').flickity({
            // options
            cellAlign: 'left',
            contain: true,
            lazyLoad: true,
            pageDots: false,
            wrapAround: true,
            autoPlay: true
        });

        if ($(window).width() > 767) {

            $('.top-carousel-food').flickity({
                draggable: false,
                pageDots: false,
                prevNextButtons: false
            });

        }

        var $gallery = $('.bottom-carousel-food').flickity();

        $gallery.on( 'staticClick.flickity', function( event, pointer, cellElem, cellIndex ) {
            if ( cellIndex !== undefined ) {
                $gallery.flickity( 'select', cellIndex );
            }
        });

        $('.bottom-carousel').flickity( options );

        setTimeout(function() {
            options.autoPlay = false;
        }, 5000);

    });

Answer 1

// external js: flickity.pkgd.js

var $carousel = $('.carousel').flickity({
  autoPlay: true,
});

var flkty = $carousel.data('flickity');
var autoplayCount = 0;

$carousel.on( 'select.flickity', onSelect );

function onSelect() {
  if ( flkty.player.state != 'playing' ) {
    disableAutoplay()
    return;
  }
  // stop after 2 advances
  autoplayCount++;
  if ( autoplayCount >= 2 ) {
    disableAutoplay();
  }
}

function disableAutoplay() {
  $carouse.flickity('stopPlayer');
  $carousel.off( 'select.flickity', onSelect );
}