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.

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.

• javascript
• html

• 1 Try pauseAutoPlayOnHover: false, tell how it went. – Razvan Zamfir Commented Jul 27, 2018 at 9:11
• I already tried pauseAutoPlayOnHover: false It doesn't work unfortunately – Lyubomir Ivanov Valchev Commented Jul 27, 2018 at 9:12
• Try: menting out the line this.on( 'uiChange', this.stopPlayer ); in the flickity.pkgd.js. – Razvan Zamfir Commented Jul 27, 2018 at 9:19

6 Answers 6

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

This part of code should help

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

And a full example inside the functional ponent with React hooks