Flickity Carousel - autoPlay stops after user interaction

Question

I have a Flickity Carousel which contains a testimonial. The carousel is set to autoplay.

The problem is if the user clicks on the dots or on the next / previous button the autoPlay stops.

This is what I have:

JS

var flkty = new Flickity( '.main-gallery', {
  cellAlign: 'left',
  contain: true,
  wrapAround: true,
  prevNextButtons: true,
  autoPlay: 5000
});

HTML

  <div class="main-gallery">
  <div class="gallery-cell">
    <div class="testimonial">
      <p class="testimonial-quote" style="font-style: italic;">"Comment."</p>
      <span class="testimonial-author">Author</span>
    </div>
  </div>
  <div class="gallery-cell">
     <div class="testimonial">
      <p class="testimonial-quote">"Comment."</p>
      <span class="testimonial-author">Author</span>
    </div>
  </div>
  <div class="gallery-cell">
        <div class="testimonial">
      <p class="testimonial-quote">"Comment."</p>
      <span class="testimonial-author">Author</span>
    </div>
  </div>
</div>

Please assist me to let the autoPlay continue and don't stop after a user is interacting with the dots or next/prev button.

Answer 1

I solved this question the following way:

• Catch 'pointerUp' event that is called after you interact with the slider.
• Resume auto play when event is fired.

The following code demonstrates this behavior:

currentFlickity.on('pointerUp', function (event, pointer) {
        currentFlickity.player.play();
    });

Answer 2

This part of code should help

change: () => {
  (flRef as any).current?.flkty.player.play()
}

And a full example inside the functional component with React hooks 😁 change event will fire on every slide change (index change)

import React, { useRef } from 'react'
import Flickity from 'react-flickity-component'
import { Link } from '../../i18n'

export default function HomeSlider(props) {
  const { slides} = props 

  const flRef = useRef()

  return (
    <div className="home-slider">
      <Flickity 
        flickityRef={() => {}}
        ref={flRef}
        static
        options={{
          wrapAround: true, 
          freeScroll: false, 
          initialIndex: 1, 
          autoPlay: 6000,
          lazyLoad: true,
          adaptiveHeight: true,
          on: {
            ready: () => {
              console.log('Flickity ready', flRef.current)
            },
            change: () => {
              (flRef as any).current?.flkty.player.play()
            }
          }
        } as any}>
          {
            slides?.length > 0 && slides.map(slide => (
              <div className="slide" key={slide.id}>
                <Link href={slide?.details_button_url || '/'}>
                  <img src={slide.image_url} />
                </Link>
              </div>
            ))
          }
      </Flickity>
    </div>
  )
}