diff --git a/README.md b/README.md index 965aa6396..3b6384044 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,9 @@ export default { ### Configuration | Property | Type | Default | Description | |:--------------------------|:--------|:--------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| autoplay | Boolean | false | Flag to enable autoplay +| autoplayTimeout | Number | 2000 | Time elapsed before advancing slide +| autoplayHoverPause | Boolean | false | Flag to pause autoplay on hover | easing | String | ease | Slide transition easing. Any valid CSS transition easing accepted. | | minSwipeDistance | Number | 8 | Minimum distance for the swipe to trigger a slide advance. | | navigationClickTargetSize | Number | 8 | Amount of padding to apply around the label in pixels. | diff --git a/play/index.js b/play/index.js index 2815ffdc6..480ebc790 100644 --- a/play/index.js +++ b/play/index.js @@ -87,9 +87,13 @@ play("Carousel", module) } }) .add("Autoplay", h => createContainer( - h, containerWidth, [h(Carousel, { props: { autoplay: true, autoplayHoverPause: false } }, generateSlideImages(h))] - ) + h, containerWidth, [h(Carousel, { props: { autoplay: true, autoplayHoverPause: false } }, generateSlideImages(h))] ) +) +.add("Autoplay, Looping", h => createContainer( + h, containerWidth, [h(Carousel, { props: { autoplay: true, autoplayHoverPause: false, loop: true } }, generateSlideImages(h))] +) +) .add("Autoplay, pause on hover", h => createContainer( h, containerWidth, [h(Carousel, { props: { autoplay: true, autoplayHoverPause: true } }, generateSlideImages(h))] ) diff --git a/src/Carousel.vue b/src/Carousel.vue index 709e8e883..9e3d02321 100644 --- a/src/Carousel.vue +++ b/src/Carousel.vue @@ -766,7 +766,16 @@ export default { const width = this.scrollPerPage ? this.slideWidth * this.currentPerPage : this.slideWidth; - this.offset = width * Math.round(this.offset / width); + + // lock offset to either the nearest page, or to the last slide + const lastFullPageOffset = width * Math.floor(this.slideCount / this.currentPerPage - 1) + const remainderOffset = lastFullPageOffset + this.slideWidth * (this.slideCount % this.currentPerPage) + if (this.offset > (lastFullPageOffset + remainderOffset) / 2) { + this.offset = remainderOffset + } + else { + this.offset = width * Math.round(this.offset / width); + } // clamp the offset between 0 -> maxOffset this.offset = Math.max(0, Math.min(this.offset, this.maxOffset));