最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Flickity Carousel - autoPlay stops after user interaction - Stack Overflow

programmeradmin1浏览0评论

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.

Share Improve this question asked Jul 27, 2018 at 9:02 Lyubomir Ivanov ValchevLyubomir Ivanov Valchev 7732 gold badges16 silver badges34 bronze badges 3
  • 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
Add a ment  | 

6 Answers 6

Reset to default 3

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

发布评论

评论列表(0)

  1. 暂无评论