diff --git a/play/index.js b/play/index.js index f4233ff91..ee6e73c9b 100644 --- a/play/index.js +++ b/play/index.js @@ -68,7 +68,7 @@ play("Carousel", module) ) ) .add("Autoplay", h => createContainer( - h, containerWidth, [h(Carousel, { props: { autoplay: true } }, generateSlideImages(h))] + h, containerWidth, [h(Carousel, { props: { autoplay: true, autoplayHoverPause: false } }, generateSlideImages(h))] ) ) .add("Autoplay, pause on hover", h => createContainer( diff --git a/src/Carousel.vue b/src/Carousel.vue index 9d84ca5f8..11f7d46b9 100644 --- a/src/Carousel.vue +++ b/src/Carousel.vue @@ -478,6 +478,12 @@ export default { this.maxOffset ) : Math.min(this.slideWidth * page, this.maxOffset); + + // restart autoplay if specified + if (this.autoplay && !this.autoplayHoverPause) { + this.restartAutoplay(); + } + // update the current page this.currentPage = page; } diff --git a/src/mixins/autoplay.js b/src/mixins/autoplay.js index c877ff764..620df70f4 100644 --- a/src/mixins/autoplay.js +++ b/src/mixins/autoplay.js @@ -46,6 +46,10 @@ const autoplay = { this.autoplayTimeout ); } + }, + restartAutoplay() { + this.pauseAutoplay(); + this.startAutoplay(); } }, mounted() { diff --git a/tests/client/components/__snapshots__/carousel.spec.js.snap b/tests/client/components/__snapshots__/carousel.spec.js.snap index 9d4679fee..883fa7482 100644 --- a/tests/client/components/__snapshots__/carousel.spec.js.snap +++ b/tests/client/components/__snapshots__/carousel.spec.js.snap @@ -169,6 +169,22 @@ exports[`Carousel should mount successfully 1`] = ` " `; +exports[`Carousel should not reset autoplay when switching slide with autoplayHoverPause 1`] = ` +".VueCarousel-wrapper + .VueCarousel-inner(role=\'listbox\', style=\'visibility: hidden;\') + .VueCarousel-slide(tabindex=\'-1\') + .VueCarousel-slide.VueCarousel-slide-active.VueCarousel-slide-center(tabindex=\'-1\') +| +.VueCarousel-pagination + ul.VueCarousel-dot-container(role=\'tablist\') + li.VueCarousel-dot(aria-hidden=\'false\', role=\'presentation\', aria-selected=\'false\', style=\'margin-top: 20px; padding: 10px;\') + button.VueCarousel-dot-button(type=\'button\', role=\'button\', tabindex=\'0\', style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\') + li.VueCarousel-dot.VueCarousel-dot--active(aria-hidden=\'false\', role=\'presentation\', aria-selected=\'true\', style=\'margin-top: 20px; padding: 10px;\') + button.VueCarousel-dot-button(type=\'button\', role=\'button\', tabindex=\'1\', style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\') +// +" +`; + exports[`Carousel should register 0 slides when 0 slides are added to the slots 1`] = ` ".VueCarousel-wrapper .VueCarousel-inner(role=\'listbox\', style=\'visibility: hidden;\') @@ -194,6 +210,22 @@ exports[`Carousel should register 3 slides when 3 slides are added to the slots " `; +exports[`Carousel should reset autoplay when switching slide without autoplayHoverPause 1`] = ` +".VueCarousel-wrapper + .VueCarousel-inner(role=\'listbox\', style=\'visibility: hidden;\') + .VueCarousel-slide(tabindex=\'-1\') + .VueCarousel-slide.VueCarousel-slide-active.VueCarousel-slide-center(tabindex=\'-1\') +| +.VueCarousel-pagination + ul.VueCarousel-dot-container(role=\'tablist\') + li.VueCarousel-dot(aria-hidden=\'false\', role=\'presentation\', aria-selected=\'false\', style=\'margin-top: 20px; padding: 10px;\') + button.VueCarousel-dot-button(type=\'button\', role=\'button\', tabindex=\'0\', style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\') + li.VueCarousel-dot.VueCarousel-dot--active(aria-hidden=\'false\', role=\'presentation\', aria-selected=\'true\', style=\'margin-top: 20px; padding: 10px;\') + button.VueCarousel-dot-button(type=\'button\', role=\'button\', tabindex=\'1\', style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\') +// +" +`; + exports[`Carousel should unmount successfully 1`] = ` ".VueCarousel-wrapper .VueCarousel-inner(role=\'listbox\', style=\'visibility: hidden;\') diff --git a/tests/client/components/carousel.spec.js b/tests/client/components/carousel.spec.js index 319be1fe5..e4ee7e5f8 100644 --- a/tests/client/components/carousel.spec.js +++ b/tests/client/components/carousel.spec.js @@ -249,4 +249,31 @@ describe('Carousel', () => { expect(carouselInstance.autoplayInterval).toBe(undefined); return utils.expectToMatchSnapshot(vm); }); + + it('should reset autoplay when switching slide without autoplayHoverPause', () => { + const vm = new Vue({ + el: document.createElement('div'), + render: (h) => h(Carousel, { props: { perPage: 1, autoplay: true, autoplayHoverPause: false } }, [h(Slide), h(Slide)]), + }); + + const carouselInstance = vm.$children[0]; + const spy = spyOn(carouselInstance, 'restartAutoplay'); + carouselInstance.goToPage(2); + expect(carouselInstance.restartAutoplay).toHaveBeenCalled(); + return utils.expectToMatchSnapshot(vm); + }); + + it('should not reset autoplay when switching slide with autoplayHoverPause', () => { + const vm = new Vue({ + el: document.createElement('div'), + render: (h) => h(Carousel, { props: { perPage: 1, autoplay: true, autoplayHoverPause: true } }, [h(Slide), h(Slide)]), + }); + + const carouselInstance = vm.$children[0]; + const spy = spyOn(carouselInstance, 'restartAutoplay'); + carouselInstance.goToPage(2); + expect(carouselInstance.restartAutoplay).not.toHaveBeenCalled(); + return utils.expectToMatchSnapshot(vm); + }); + });