Add PauseOnHover for autoplay feature #5
Conversation
✅ Deploy Preview for overlapping-slider ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
README.md
Outdated
| | Attribute | As for option | Description | | ||
| |-------------------------------|--------------------------------------|-------------------------------------------------| | ||
| | `data-os-autoplay="2` | `autoplay: 2` | Add autoplay option through html attribute | | ||
| | `data-os-pauseOnHover="true"` | `pauseOnHover: true"` | Enable pauseOnHover feature (only for autoplay) | |
There was a problem hiding this comment.
data-os-pauseOnHover is inappropriate.
https://stackoverflow.com/questions/25033268/are-html5-data-attributes-case-insensitive
src/_index.js
Outdated
| // pauseOnHover (priority: attribute > options) | ||
| if(this.wrapper.hasAttribute(this._attr.pauseOnHover)){ | ||
| const isPauseOnHover = this.wrapper.getAttribute(this._attr.pauseOnHover).toLowerCase().trim(); | ||
| this.options.pauseOnHover = isPauseOnHover === "true"; |
There was a problem hiding this comment.
Whenever the attribute for pauseOnHover appear in the wrapper element, we will have pauseOnHover: true.
Don't care what the value is.
This is just the same with the swipe option which you might have had a look already, haven't you?
web/html/home.html
Outdated
| @@ -84,6 +84,8 @@ <h2>#3 Autoplay</h2> | |||
| <button data-select="play" data-id="slider-3" class="btn green disabled">Play</button> | |||
| <button data-select="prev" data-id="slider-3" class="btn">Previous</button> | |||
| <button data-select="next" data-id="slider-3" class="btn">Next</button> | |||
| <button data-select="remove-poh" data-id="slider-3" class="btn">Remove PauseOnHover</button> | |||
| <button data-select="register-poh" data-id="slider-3" class="btn">Add PauseOnHover</button> | |||
There was a problem hiding this comment.
There should be only one clickable button at a time. You can either use .disabled class (see Pause and Play button) or display none/block as we also don't have so much spacing here to have so many buttons.
|
I have fixed it. Please check again! |
Pause On Hover
I have added a little bit of code for the autoplay feature.
With that code, we can control the autoplay feature by hovering over it. You can turn on this option by passing an option
pauseOnHoverthrough HTML attribute or Javascript object. And when the optionpauseOnHoveris false, I also removed the event listener for optimizing performance.