Tiny-slider: Swipe between slides not work correctly when autoplay is enabled

Created on 7 Oct 2018  路  13Comments  路  Source: ganlanyuan/tiny-slider

__Issue description__: Hello, when I use autoplay and dragging function simultaneously the interval for autoplay isn't reset when a user swipe between slides. See example. Please, reset the interval when a user swipe between slides.

__Demo link/slider setting__: http://jsfiddle.net/p5wdjLn2/12/

_Browser name && version_: Chrome 69.0.3497.100
_OS name && version_: macOS Mojave 10.14

bug

Most helpful comment

@martin-badin The bug is still here

version
"tiny-slider": "^2.9.1",

config
var slider = tns({
container: '.my-slider',
items: 3,
autoplay: true,
mouseDrag: true,
controls: false,
nav: false,
autoplayHoverPause: true,
autoplayButtonOutput: false
});

When I drag and hold with mouse on slide item and get out of slider with cursor, animation resume (animation should not resume when drag is hold)

All 13 comments

I got the same problem and I was writing the same issue. Thank you for posting!

here is solution

for stop timer

function onPanStart (e) {
    if (running) { onTransitionEnd(); }

+   if (autoplay && animating) { stopAutoplayTimer(); }

    panStart = true;
    if (carousel) {
      caf(rafIndex);
      rafIndex = 0;
    }
    ...

and for start timer

function onPanEnd (e) {
    ...

    if (swipeAngle) { moveDirectionExpected = '?'; } // reset

+   if (autoplay && !animating) { setAutoplayTimer(); }
  }

please, implement this fix to next release

This is how i fixed it:

slider.events.on('dragStart', carousel.stopAutoplay);
slider.events.on('touchstart', carousel.stopAutoplay);
slider.events.on('dragEnd', carousel.startAutoplay);
slider.events.on('touchEnd', carousel.startAutoplay);

stopAutoplay(){
  slider.pause();
},

startAutoplay(){
  slider.play();
},

Hope it helps!!

@martin-badin So you want the interval for autoplay start right after the touch end?
I think @Jack89ita's solutions is good for this.

Yes, I want but this bug should be fixed in the package.

Added in this commit.

Thanks

Hi @ganlanyuan thank you for fixing this, but how can i download this edited package?
thanks!

@Jack89ita This change is not published yet, so you won't be able to download via npm.
But you can still download it manually at the repository of this library.

@Jack89ita
npm install https://github.com/ganlanyuan/tiny-slider#10b15514f114b3ea1053a639aa5b449939ca334a
or
npm install ganlanyuan/tiny-slider

@TitanFighter Thank you!

The bug is still showing when autoplayHoverPause is set as true

@martin-badin The bug is still here

version
"tiny-slider": "^2.9.1",

config
var slider = tns({
container: '.my-slider',
items: 3,
autoplay: true,
mouseDrag: true,
controls: false,
nav: false,
autoplayHoverPause: true,
autoplayButtonOutput: false
});

When I drag and hold with mouse on slide item and get out of slider with cursor, animation resume (animation should not resume when drag is hold)

Was this page helpful?
0 / 5 - 0 ratings