Resume slider autoplay after user click/tap

Design help General
1

Any chance sliders are able to do this currently? As it stands at the moment, if a user clicks on an arrow on a slider or taps on it, the slider will not resume autoplay at all.

I did a search in the forum and saw that this same question was asked a while ago here:

And here, where the solution was to place a transparent div overlay on top of it:

It’s also been requested in the wishlist area of Webflow, but I was wondering if there’s any other way to accomplish this besides using that transparent overlay div that was suggested in the post I linked to above?

Thanks!

3 Likes
2

Wondering the same thing myself!

3

Add the custom code in the footer section from the settings.
This will work for slideshows without any arrows, navigation.

<script>
$(document).ready(function () {
  setTimeout(function () {
  $('.w-slider').unbind('mousedown');
  $('.w-slider').unbind('touchstart');
  }, 500)
});
</script>
1 Like
4

From a pure usability perspective, you should not automatically resume. What if the user stopped a slide to read the content. Now turns head to answer the phone, and it has now automatically moved away (disappeared) to another slide. Hmm. Which one was I on? Now you have a frustrated user.

A better solution is to leave the slider alone. When it is stopped, show an element the user can interact with that will trigger or resume. Anytime you change defaults away from the “normal behavior,” most users are familiar with, you run the risk of confusing them.

5

Yes, but what if the slider is purely images and the design is to have the slider simply rotate slides?

4 Likes
6

Those usability monsters are irritating…

2 Likes
7

Hi @Tuna_jedi

I know this is quite an old thread so I hope you don’t mind me messaging out of the blue about it!

I just tried out this solution but it’s not working for me. I don’t know anything about developing or writing code! Do you have any ideas of what I might be doing wrong?

My preview site is here: https://objekt-website-2020.webflow.io/

And my read-only link is here: https://preview.webflow.com/preview/objekt-website-2020?utm_medium=preview_link&utm_source=designer&utm_content=objekt-website-2020&preview=feda8c3d044eb88c3ffaf7a4987852ba&mode=preview

Thanks so much!
Laura

8

I also tried this code but unfortunately it didn’t work.

9

I figured out the issue is related :focus. When a slider arrow is clicked, it has the :focus state applied to it. The slider autoplay will pause if either of the arrows have the :focus state. I setup a function to remove :focus after an arrow is clicked using .blur(). Then once you are no longer hovering over the slider, the autoplay will resume as normal.

  $(".left-arrow, .right-arrow").on("click", function () {
    this.blur();
  });