Fix carousel failing to lock to remainder slides (#303)

* Update Carousel.vue fix carousel bug * Added a looping autoplay to the Story page. (#305) * docs(readme): updated README configuration section (#304)
SSENSE · Oct 31, 2018 · b6c6775 · b6c6775
1 parent f5743b9
commit b6c6775
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -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
@@ -773,7 +773,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));