From 6138baacd970878a95dc5318ff9465f3b73ac2e7 Mon Sep 17 00:00:00 2001 From: Xavier L'Heureux Date: Thu, 6 Dec 2018 21:38:55 -0500 Subject: [PATCH] fix(carousel): flush the slides left when they don't fill the width (#323) * fix(carousel): Flush the slides left when they don't fill the width (#323) When there are too few slides to fill the row, with scrollPerPage, the slides were flushed right instead of left. By bounding maxOffest to a minimum of 0, the slides are aligned on the left-hand-side Fix #323 * style(play): Use capitals in tests for consistency --- play/index.js | 4 ++++ src/Carousel.vue | 5 +++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/play/index.js b/play/index.js index b9aae2e6d..fe42c760c 100644 --- a/play/index.js +++ b/play/index.js @@ -55,6 +55,10 @@ play("Carousel", module) h, containerWidth, [h(Carousel, {}, generateSlideImages(h))] ) ) + .add("Too few per page", h => createContainer( + h, containerWidth, [h(Carousel, { props: { perPage: 10, scrollPerPage: false } }, generateSlideImages(h))] + ) + ) .add("3 per page", h => createContainer( h, containerWidth, [h(Carousel, { props: { perPage: 3 } }, generateSlideImages(h))] ) diff --git a/src/Carousel.vue b/src/Carousel.vue index 172ca917f..2fd261fe1 100644 --- a/src/Carousel.vue +++ b/src/Carousel.vue @@ -413,9 +413,10 @@ export default { * @return {Number} */ maxOffset() { - return ( + return Math.max( this.slideWidth * (this.slideCount - this.currentPerPage) - - this.spacePadding * this.spacePaddingMaxOffsetFactor + this.spacePadding * this.spacePaddingMaxOffsetFactor, + 0 ); }, /**