diff --git a/src/components/carousel/README.md b/src/components/carousel/README.md index d37f2641481..5185a6237d3 100644 --- a/src/components/carousel/README.md +++ b/src/components/carousel/README.md @@ -122,6 +122,10 @@ carousel, set the `interval` back to the desired number of ms. When the carousel is paused, the user can still switch slides via the controls (if enabled) or touch swipe (on touch enabled devices, if not disabled). +When the users mouse hovers the carousel it will automatically pause, and will automatically +restart when the mouse leaves the carousel. To disable this feature, set the `no-hover-pause` +prop on `. + ## Controls and Indicators Set the prop `controls` to enable the previous and next control buttons. diff --git a/src/components/carousel/carousel.js b/src/components/carousel/carousel.js index bc53f680b2d..d661a115b3d 100644 --- a/src/components/carousel/carousel.js +++ b/src/components/carousel/carousel.js @@ -61,6 +61,8 @@ function getTransisionEndEvent(el) { return null } +const noop = () => {} + // @vue/component export default { name: 'BCarousel', @@ -112,6 +114,11 @@ export default { type: Boolean, default: false }, + noHoverPause: { + // Disable pause on hover + type: Boolean, + default: false + }, imgWidth: { // Sniffed by carousel-slide type: [Number, String] @@ -541,8 +548,8 @@ export default { ) const on = { - mouseenter: this.pause, - mouseleave: this.restart, + mouseenter: this.noHoverPause ? noop : this.pause, + mouseleave: this.noHoverPause ? noop : this.restart, focusin: this.pause, focusout: this.restart, keydown: evt => {