Tiny-slider: Autoplay stopped after nav button being clicked

Created on 16 May 2018  路  8Comments  路  Source: ganlanyuan/tiny-slider

__Issue description__:
Hello, first of all - thank you for this really nice library.

I checked the source code and realized that stopping autoplay after user interaction is intentional.
So I tried to use _play_ function to start the timer but apparently this does not work. You can see the code below.
The problem may be the fact that you have click events attached to those buttons already.

__Demo link/slider setting__:
var slider = tns({
container: '.tiny-slider',
controls: false,
autoplay: true,
autoplayTimeout: 2500,
autoplayButtonOutput: false
});
var elem = document.querySelector('.tns-nav');
var buttons = elem.querySelectorAll('button');
buttons.forEach(function(but) {
but.addEventListener('click', function(e) {
slider.play();
});
});

_Tiny-slider version_: 2.6.0
_Browser name && version_: Google Chrome 66.0.3359.170
_OS name && version_: Windows 7

Most helpful comment

It would be nice to have this as an option?

All 8 comments

Okay, to make it work the way I need - I did some nasty thing like this:

setTimeout(slider.play, 1);

Yes, that's expected.
When a user clicks the controls/nav, I suppose he/she wants to manually check the slides, so I stop the autoplay. On the contrary, if the autoplay continues after the user clicks the controls/nav, he/she may find the slide he/she is watching suddenly slide away, I guess that's not he/she really wants.

Close for now.
Feel free to reopen it if you think differently.

It would be nice to have this as an option?

This behavior should definitely be optional. Slider can stop while the user is hovering on it (if you want to avoid the described UX case), but it should not be permanent in any case.

The way slider works with autoplay and buttons right now is not right at all. It should not be default and only option.

Here's an easy workaround for this issue.

Just copy/paste it after slider initialization:

var buttons = document.querySelectorAll('.tns-nav button')
    buttons.forEach(function() {
        this.addEventListener('click', function(e) {
            slider.play()
        })
    })

I feel like this behavior is not consistent. While the slider stops once the user interacts with the buttons, if the option mouseDrag is turned on, and the user interacts with the slider that way, it doesn't stop.

Wouldn't it be better to make the "stop after interacting" behavior optional and have it affect every interaction case?

Agree with others that this behaviour should ideally be optional.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

youradds picture youradds  路  3Comments

CristianEstiber picture CristianEstiber  路  3Comments

nandes2062 picture nandes2062  路  5Comments

movationdesign picture movationdesign  路  5Comments

snnsnn picture snnsnn  路  3Comments