From d3849ff996aa82b07371daa6e98f4bc515a18537 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 21 Mar 2019 15:59:14 -0300 Subject: [PATCH 1/2] feat(carousel): add no-hover-pause prop Adds a new prop `no-hover-pause` that can be used to disabled carousel pausing on mouse over. Closes #2887 --- src/components/carousel/carousel.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) 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 => { From c2f9eb04e3d63379e77de5101fc2106ffb0db673 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 21 Mar 2019 16:02:47 -0300 Subject: [PATCH 2/2] Update README.md --- src/components/carousel/README.md | 4 ++++ 1 file changed, 4 insertions(+) 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.