Andrew,
Here is a link: https://cppglobal.webflow.io/
Slider 1: The main image on the homepage
Slider 2: The text right under the Nav bar
Right now, they are both set to autoplay and the controls hidden. Ideally, the text would have a forward arrow, and the images would slide in sync with the text.
Thanks!
Lou
Looks great!
Could I see a read-only link too?
AC
Hey @Andrew_Coderre
Just wanted to let you know that I reduced the size of the arrow containers and this has significantly improved things! Thank you!
It still ‘freezes’ for a while after I click through to a different slide. As you mentioned I’ve set auto play to 4000ms because that’s the length of the video clips within the slider (and that is the time I’ve set the progress bars to).
Do you know if there’s a way to stop the slider pausing for so long after click? Ideally I’d like it to immediately resume autoplay after click – the idea being that the click is to enable the user to ‘skip’ a slide if they don’t want to view the full 4 seconds of footage.
Thanks!
Laura
Hey @Lou2 & @lozza_dale,
I am looking at both of these and want to help further, just wrapping up a big project the last couple of days. I’ll dig into these more before the end of the weekend.
Cheers!
AC
Hey @Andrew_Coderre
No worries at all! I hope you’re big project is going/has gone well!
I think I’ve got it working close enough for now. I’ve got it so it no longer freezes, but instead the ‘clip after click’ seems to run faster than it should, but then returns to normal. If you do have any more ideas it would be great to hear them, but as I say, I think it’s working close enough for now.
Thanks again for all your help!
Thanks a ton 
That works pretty well. Only: As soon as you interact with an element, where the pointer is not ignored (slider navigation, button, etc.) the autoplay stops (at least for me…). It would be really nice if the pause on hover would be optional. Is that on the wishlist already? 
Hey @Beppino_Defner,
I think whether or not it is a problem depends on how you look at it. If you take into consideration the extremely diverse ways designers are using sliders in webflow sites, this isn’t necessarily a bad thing to have. Since these are navigation elements that pause the slider, the browser recognizes the user interacting with them and prevent’s it from transitioning to the next slide as we all now know.
From a customer experience perspective if I am looking at a slider then move my cursor to the navigation; then the slider changes to the next slide a moment before I click and I watch it completely skip over a slide, to me that is a negative user experience. With the functionality of the sliders as they are now, that won’t happen.
I think it is important to consider what content is in your slider, how your user should interact with them, and what role it plays in achieving whatever your goal is; i.e gaining consumer’s trust, showcasing capabilities, making sale, etc. If the slides contain videos the user might not receive the complete impact of the content unless they watch the entire segment on the slide. So in some situations, it might be worthwhile to disable navigation altogether.
One thing I would like to see change or see the option to change is that when you move off of the navigation elements, the timer for that slide returns to zero. I am unaware if there is a wishlist item for this or not though, and I am in no way dissatisfied with the tool available.
Plus, using interactions you can almost always build something from scratch! Just my thoughts on the subject.
AC
Hey Andrew,
I’m having a similar issue here and can’t troubleshoot. I want to disable the Pause Slider on Hover.
I’ve added the custom code within the Page Settings, underneath the Inside <head> tag and changed the code to my specific slider class on the page. No luck. I’ve also tried a different snippet of code, and tried applying the code within the Project Settings as well. Still no luck.
Thoughts?
Site
https://smrtimage.webflow.io/
(the slider in reference is about 2/3 the way down the page)
Thanks in advance!
Mike
Hey @BbMike,
I noticed in the page settings you added the code snippet, but wrapped the class in square brackets [+]. Remove those and it should fix that issue. If you want to keep the arrow navigation working then you need to specify that. I’ll post code you can copy:
<style>
.slider-audio{
pointer-events: none;
}
.arrows{
pointer-events: auto;
}
</style>
Paste that into the head and it should work.
AC
By the way, awesome use of lottie! I have mostly only used it for vector based stuff, cool to see it in action the way you implemented it.
Good work!
AC
Ha, thanks.
Apparently I’m capable of (slightly) complex scroll jacked Lottie animations but can’t figure out a simple code! 
Next step is to add some product callouts based on scroll (hence the slight pauses in the animation). Wish me luck.
Side question - call it extra credit:
Assume that most Webflow users have not implemented these work-arounds. What happens to progress bars on designers’ slides that will now fail to sync up with the slide change timing? Example, when you now hover over slides that has a progress bar, it will pause the autoplay feature, yet will not pause a progress bar. Follow? I’ve looked back at a few Showcase projects that have slider progress bars and a lot of them has this issue now.
As a user on a site, I wouldn’t have the slightest clue as to why a slider with a progress bar looks jacked because it’s completely out of sync after some browsing. Hell, it took myself a few days to figure out that the issue was the position of the mouse.
Count me as one more designer who would strongly recommend to Webflow that this “Pause on Hover” should definitely be a toggled feature. That way, progress bars will again be a viable design element.
In any case, thanks for the help!
Mike
AC!
Running into another issue.
I’ve got another slider (different class name) on a different page. I’ve tried the same code snippet with an updated class name and it won’t work. Have I hit a limitation?
Thanks!
Mike
Hey @BbMike,
Try changing the css selector in your page settings from .slider-fMRI to .slider-fmri. I’m fairly certain that if you capitalize any characters when you assign a class name to an element, Webflow changes them to lowercase by default when it publishes the code. Webflow doesn’t validate custom code so it wouldn’t change your custom snippet to match nor tell you if it wasn’t affecting anything. I’d start there.
That did it. Thank you, sir.
@Lou2 @lozza_dale & whoever else I told I would look into other ways to do this, I actually did.
I wrote a couple lines of JQuery that you can use to trigger a click on the hidden webflow navigation, and assign it to any element you’d like to trigger it. Post is here:
This works flawlessly! Thank you.
Note to others: Put it in the head code section 
Hey! So I am running into the pause on hover issue and I put this code into the head of the page and it still pauses. I definitely did it wrong. I’m pretty new to this whole thing. But I was wondering if there was anyway you could help me out?
Hey @NickLanglois I took a look.
So you are missing a couple of things:
-First of all, the method I created requires Jquery and I do not see that library loaded into your page, unless you added it to your site-wide custom code section but I can’t see that area through a read-only link.
-Second, this makes use of using other buttons that are not the native Webflow slider navigation buttons. If you want to use this method you must add your own buttons for ‘Next’ and ‘Back’ navigation. The following is a screenshot from your custom code section in page settings:
Trigger is clicked, it forces a click event on the Target.Trigger and the Target because we are calling them using selectors. The green boxes indicate your Triggers, the red boxes indicate your Targets.#outer-next, #outer-back, #inner-next, #inner-back) to your buttons. When you add them to your elements, do not include the #. You can add id’s to elements in the settings panel of each element.Left Arrow and Right Arrow need to have the tags that start with inner. Your buttons that you want to be the navigation for your slider need the tags that start with outer.
What I can tell that you need:
-Load JQuery into your site using a script tag, a complete tag you can copy and paste is in my tutorial post.
-You need other buttons to control your slider navigation.
-You need to add the ID’s to the appropriate buttons.
I recommend adding all of the <script> elements in the section that is called Before </body> tag. Leave the <style> tags in the head. I neglected to explain this in my tutorial post and I will update it.
<style>
.sb-slider-nav-parent{
backdrop-filter: blur(10px);
}
</style>
This part using backdrop-filter is strictly cosmetic for something that isn’t actually on my page anymore, you don’t need it in your code for this to work.
In case you don’t know, nothing you add into the custom code area of the page settings or site-wide settings will show up on your designer preview. It will only show up on the published sites.