Feat: #195 (#284)

Feat: #184 (#283)

Feat: #184

Feat: #195

Revert "Feat: #195"

This reverts commit 961ce8b.

Feat: #195

v0.14.0

docs/public/api/index.html

@@ -80,6 +80,11 @@ <h3 id="autoplayHoverPause"><a href="#autoplayHoverPause" class="headerlink" tit
 <li><strong>Type</strong>: <code>Boolean</code></li>
 <li><strong>Default</strong>: <code>true</code></li>
 </ul>
+<h3 id="autoplayDirection"><a href="#autoplayDirection" class="headerlink" title="autoplayDirection"></a>autoplayDirection</h3><p>Set to "backward" to change the autoplay direction to right to left instead of the default left to right movement.</p>
+<ul>
+<li><strong>Type</strong>: <code>String</code></li>
+<li><strong>Default</strong>: <code>forward</code></li>
+</ul>
 <h3 id="loop"><a href="#loop" class="headerlink" title="loop"></a>loop</h3><p>Flag to make the carousel loop (wrap) when it reaches either end.</p>
 <ul>
 <li><strong>Type</strong>: <code>Boolean</code></li>

src/Carousel.vue

@@ -492,6 +492,19 @@ export default {
         this.goToPage(this.getNextPage(), "navigation");
       }
     },
+    goToLastSlide() {
+      // following code is to disable animation
+      this.dragging = true;
+
+      // clear dragging after refresh rate
+      setTimeout(() => {
+        this.dragging = false;
+      }, this.refreshRate);
+
+      this.$nextTick(() => {
+        this.goToPage(this.pageCount);
+      });
+    },
     /**
      * A mutation observer is used to detect changes to the containing node
      * in order to keep the magnet container in sync with the height its reference node.
@@ -824,7 +837,12 @@ export default {
     );
 
     this.$emit("mounted");
-  },
+
+    // when autoplay direction is backward start from the last slide
+    if (this.autoplayDirection === "backward") {
+        this.goToLastSlide();
+    }
+  },    
   beforeDestroy() {
     this.detachMutationObserver();
     window.removeEventListener("resize", this.getBrowserWidth);

src/mixins/autoplay.js

@@ -20,6 +20,13 @@ const autoplay = {
     autoplayHoverPause: {
       type: Boolean,
       default: true
+    },
+    /**
+     * Autoplay direction. User can insert backward to make autoplay move from right to left
+     */
+    autoplayDirection: {
+      type: String,
+      default: "forward"
     }
   },
   data() {
@@ -42,14 +49,17 @@ const autoplay = {
     startAutoplay() {
       if (this.autoplay) {
         this.autoplayInterval = setInterval(
-          this.advancePage,
+          this.autoplayAdvancePage,
           this.autoplayTimeout
         );
       }
     },
     restartAutoplay() {
       this.pauseAutoplay();
       this.startAutoplay();
+    },
+    autoplayAdvancePage() {
+      this.advancePage(this.autoplayDirection);
     }
   },
   mounted() {