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
6 Answers
Reset to default 3I 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