feat: add watcher to Autoplay Prop (#344)

* 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

* v0.16.1

* chore: build

* feat(standard): watch autoplay prop and enable/disable autoplay

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-carousel",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "description": "A flexible, responsive, touch-friendly carousel for Vue.js",
   "main": "dist/vue-carousel.min.js",
   "scripts": {

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))]
     )
@@ -98,6 +102,35 @@ play("Carousel", module)
       h, containerWidth, [h(Carousel, { props: { autoplay: true, autoplayHoverPause: true } }, generateSlideImages(h))]
     )
   )
+  .add("Autoplay, Pause/Resume", {
+    template:
+      `<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
+        <carousel style="width: 500px;" :autoplay="autoplay" :loop="true">
+          <slide v-for="slide in slideCount" :key="slide">
+            <img style="width: 100%;" src="https://res.cloudinary.com/ssenseweb/image/upload/b_white,c_lpad,g_south,h_1086,w_724/c_scale,h_560/v588/171924M176006_1.jpg" />
+          </slide>
+        </carousel>
+        <div style="float: left">
+          <pre>Autoplay Status: {{ autoplay }}</pre>
+          <button v-on:click="toggleAutoplay()">Toggle Autoplay</button>
+        </div>
+      </div>`,
+    components: {
+      Carousel,
+      Slide
+    },
+    data() {
+      return {
+        autoplay: true,
+        slideCount: 8
+      }
+    },
+    methods: {
+      toggleAutoplay() {
+        this.autoplay = !this.autoplay;
+      },
+    }
+  })
   .add("Dynamic, add or remove slides", {
     template:
       `<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">

src/Carousel.vue

@@ -352,6 +352,13 @@ export default {
     currentPage(val) {
       this.$emit("pageChange", val);
       this.$emit("input", val);
+    },
+    autoplay(val) {
+      if (val === false) {
+        this.pauseAutoplay();
+      } else {
+        this.restartAutoplay();
+      }
     }
   },
   computed: {
@@ -424,9 +431,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
       );
     },
     /**