Streaming live at 10am (PST)

Slider Adjustments: Pausing on Mouseenter & Transitions


#1

The sliders, although great for most carousel needs, tends to be sticky and glitchy how I'm using. I have two issues that I need help with, because of this.

Site for reference: https://preview.webflow.com/preview/aero-staging?preview=81e5a3b5ce65b957ab57f79cfee527ab

Transitions/Animations
I have an ease-in-out-quart on the slider as a whole, however, it is only working on the first slide. The animation is not applying to the next slide, nor is it rendering the next slide "below" the initial slide (how the transition on most carousel js tends to work).

Pausing the Slider onHover
Is there a way to set a working data-pause value for the carousel/sliders that will pause the auto slide intervals? I added Bootstraps' value » data-pause="hover" to the carousel, and it only permenantly pauses the carousel onClick. [For example: http://getbootstrap.com/javascript/#carousel-options]

Essentially, I'm trying to pause the carousel when user hovers over the slide, then resume auto sliding when the user hovers out of the carousel.

These are my current settings »


#2

Hey @Arbello it looks like you'll need to use another data attribute for hover-out to resume the slider. I haven't had a chance to play around with this functionality yet, but you may want to search for a js script to perform this or look up more Boostrap values to resume. You may find this helpful: http://stackoverflow.com/questions/24879695/how-to-pause-and-resume-carosuel-slider


#3


^^^ States that Webflow does not currently support pausing sliders on hover besides the stock/built-in pause onClick of child elements.

Seems silly to restrict the flexibility of this component just because Webflow staff thinks it isn't necessary, but, hey, it's your guys' product after all.

However, that was merely one bug out of the two being mentioned above. The slides still are not applying the transitions, and the slide below the previous is still not stacking. See your own http://sliders.webflow.com/


#4

Hey @Arbello after you remove the data-pause="hover" does the slider function correctly or are you still seeing the issue where the transitions are not taking effect for all slides? When you change this functionality, please be sure to un-publish and re-publish your webflow site. Could you please update your post with your read-only link :slightly_smiling:

How to share a read-only link:
http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

We have not made any changes as far as the slider/hover on pause feature request went due to the restrictions over hover states on Touch screen devices, but you're welcome to make a request for changes on our Feedback/Wishlist category.

Thanks in advance! :slightly_smiling:


#5

Thanks @Waldo.

I've added the read-only link to the original post at the top.

I've removed the default-pause="hover" from the slider, unpublished, then published again. (I also adjusted the the interval value for better review on what's happening.)

Bugs remain:
1. Transition applies only to the first slide
2. Slider does, indeed, pause but onClick only.
3. Slider does not begin again, even onClick outside the slider div. Requires a refresh of the page to start again.
4. Slides are still not "layering" (i.e., you cannot see Slide 2 below Slide 1 when transitioning)


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.