CODEWITHSUNDEEP
javascriptjqueryhtmlflickity
JSON_Derulo
JSON_Derulo

Reputation: 992

How to disable autoplay for Flickity slider after initialization?

I would like to start with the image sliders I have made with Flickity having the autoPlay option set to true. After a period of time I would then like to disable the setting. The reason for this is because the configuration I have with the sliders is quite complicated and I would just like to ensure the user knows how they work and then allow them to use them as they please. I know that the slider stops autoPlay on hover but that is not exactly what I am looking for. I tried to use a setTimeout() function to handle this but was not successful.

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);

    });

Upvotes: 0

Views: 3640

Answers (1)

JSON_Derulo
JSON_Derulo

Reputation: 992

// 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 );
}

Upvotes: 2

Related Questions