Streaming live at 10am (PST)

Slider stops when hovered, need a fix!

The slider on the homepage works fine, when the slider or the button in the slider itself is not hovered… however I need the button to be clickable so this is not an option. I have never experienced this problem while using webflow, but it’s driving me nuts!

This is the website with the existing problem. https://kleijntjetravel.webflow.io/ Try refreshing the page when not hovering on the slider and the problem is not there.

Any help or suggestion is appreciated! Thanks in advance


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi - the background image moves in my browser and the mouse positioning does not seem to affect it. (Chrome on Mac)

Which part of the page is the Slider, and which part is built with interactions?

We have been making changes to Slider in the past week, in order to improve accessibility. The idea with pausing slides when hovered, is that you might want to click on one slide’s button, but it changes right before you click. Or you might be reading some content, that moves before you are done reading.

So pausing on hover is by design. I’m not sure what you are having trouble with in the link posted.

I have tried making some changes and I have made the content and the image slider into different parts. The problem was that the slider did not return to autoplay after ive stopped hovering the button.

I have a slider with just images that has not button in it so I don’t want it to stop. Might be an idea to have a check box in the slider settings to say something like ‘pause on hover’?

1 Like

This comment what I was hoping to find since I encountered some accessibility issues with sliders in the past week that weren’t present before.

Would you mind taking a look at this post, please?
Slider’s ROLE and ARIA attribute problem post.

Thanks in advance!

If webflow made this into a default it would be one of the dumbest thing they’ve ever done.
I haven’t seen that many people asking for pause on hover, because why on earth would that be a thing?

it messes up the entire UX, confuses the site visitor completely, and destroys design concepts.
It took me a couple of days to even realize this was a feature! i thought it was a bug.

WE NEED TO REVERSE THIS ASAP! or at lease give us a work around instead of forcing on an entire community these arbitrary design functions 90% of webflow never asked for!

@bmh
@danro
@samliew
@PixelGeek
@Marqueezy
@snc99
@forresto

2 Likes

@GrahamB @Nir - This is definitely the right move, as most sliders include calls to action that need time to click. Using websites that contain clickable elements in sliders that don’t stop is terrible UX, so defaulting to this behavior is welcome.

You can get around this by giving your slider a negative z-index so it sits behind an element with a transparent background—which prevents the hover from triggering and stopping the slider. You can see an example here:

https://mikes-awesome-project-003eb9.webflow.io/fullscreen-slider-no-stopping

Read-only: https://preview.webflow.com/preview/mikes-awesome-project-003eb9?utm_medium=preview_link&utm_source=designer&utm_content=mikes-awesome-project-003eb9&preview=fe69cc0009193a8ec56ed05f9c6a9199&pageId=5f448d415e58d36d4457d172&mode=preview

Not sure if this is what @forresto and the Webflow team consider an appropriate solution, but it should help solve your issues without resorting to custom code.

No @mikeyevin
the right move is to give us options, not force it.

Especially when the slider is full page! a user’s mouse pointer is automatically gonna be positioned somewhere on the page, which than would automatically pause the slider before the user even understands there is a slider function here!

your workaround defeats the purpose, and makes it that the slider cant be interacted with at all.

1 Like

it might make sense in sliders that are not full page, and even still giving us control over behavior is a basic.

1 Like

This is so strange to me. Sliders are incredibly common elements used in web design and to make a gestapo type decision that determines the absolute behavior of an element is a DUMB move.

1 Like

Of course more options are better than none, but if they’re only giving us a single option then defaulting in this direction is the right move as sliders typically contain content that requires user interaction.

For your use case I’d recommend you look into alternative options with more flexibility like Slick. It’s open source and has tons of options—it’s actually what I use when I work with other platforms. If you have trouble getting it integrated with your project, the community is always here to help :v:

Webflow has thousands of users, how may of them are dedicated web designers by profession?
I believe most of us use Webflow to design 1-2 websites for ourselves, and that is it. We dont tinker with features of a daily basis, we design, upload and forget about it.

As i was about to do the same, it took me 2 days trying to figure out whats happening here. I was sure I was doing something wrong, and it drove me insane. I cleared my browser history 20 times, left forum messages until i came across the explanation.

Now an entire website plan is down the drain because the Webflow team didnt think things through.
I’ve read there was a team meeting where they’ve made that decision and i guess they just didn’t think things through as usual.

Ive been using Webflow for years and one thing ive notices is the “jump first think later” culture that has developed internally within the company. And knowing how this pattern proves itself true time and time again, even if a fix up or a option to choose would take months to implement.

I would really like the team members who are responsible for this to speak up and explain themselves. @PixelGeek @forresto

1 Like

@mikeyevin
I appreciate the effort you’re putting into justifying this nonsense.
I am not interested in overly complex custom codes, pointless workarounds or anything else for that matter besides what makes sense. OPTIONS.

I also have some fullscreen sliders, here is the code I’m now using.
Just put it in your footer code and the slider doesn’t stop on mouse hover.

<script>
  $(document).ready(function () {
    setTimeout(function () {
      $('.w-slider').unbind('mouseenter mouseleave');
    })
  });
</script>
2 Likes

Thanks @Xel ! This is just what I needed! :slight_smile:

1 Like