Add reactivity on clones.

Author: antoniandre

src/components/vueperslides/vueperslide.vue

@@ -59,6 +59,16 @@ export default {
     })
   },
 
+  beforeUpdate () {
+    if (this.shouldSkipUpdate || !Object.values(this.$slots).length) return
+
+    this.updateSlide({
+      titleSlot: this.$slots['slide-title'],
+      contentSlot: this.$slots['slide-content'],
+      style: ((this.$el.attributes || {}).style || {}).value
+    })
+  },
+
   watch: {
     image () {
       if (!this.clone) this.updateSlide({ image: this.image })
@@ -107,7 +117,6 @@ export default {
       const prevSlideIndex = (this.$parent.slides.current - 1 + this.slidesCount) % this.slidesCount
       const nextSlideIndex = (this.$parent.slides.current + 1) % this.slidesCount
 
-      // Index starts at 1 so this.slideIndex.
       if (this.slideIndex === prevSlideIndex) return faces[(4 + this.$parent.slides.current - 1) % 4]
       else if (this.slideIndex === nextSlideIndex) return faces[(this.$parent.slides.current + 1) % 4]
 
@@ -141,6 +150,12 @@ export default {
     },
     justDragged () {
       return this.$parent.touch.justDragged
+    },
+    shouldSkipUpdate () {
+      return (
+        this.clone || !this.conf.infinite ||
+        (!this.conf.slideContentOutside && !this.conf.alwaysRefreshClones)
+      )
     }
   }
 }

src/components/vueperslides/vueperslides.vue

@@ -28,7 +28,7 @@
             :content="lastSlide.content"
             :image="lastSlide.image"
             :link="lastSlide.link"
-            :style="conf.refreshClonesOnDrag ? getLastSlideStyle() : lastSlide.style"
+            :style="lastSlide.style"
             aria-hidden="true")
             template(v-if="lastSlide.titleSlot" slot="slide-title")
               vnodes(:vnodes="lastSlide.titleSlot")
@@ -42,7 +42,7 @@
             :content="firstSlide.content"
             :image="firstSlide.image"
             :link="firstSlide.link"
-            :style="conf.refreshClonesOnDrag ? getFirstSlideStyle() : firstSlide.style"
+            :style="firstSlide.style"
             aria-hidden="true")
             template(v-if="firstSlide.titleSlot" slot="slide-title")
               vnodes(:vnodes="firstSlide.titleSlot")
@@ -142,7 +142,7 @@ export default {
     transitionSpeed: { type: [Number, String], default: 600 },
     pauseOnHover: { type: Boolean, default: true },
     infinite: { type: Boolean, default: true },
-    refreshClonesOnDrag: { type: Boolean, default: false },
+    alwaysRefreshClones: { type: Boolean, default: false },
     parallax: { type: [Boolean, Number], default: false },
     touchable: { type: Boolean, default: true },
     preventYScroll: { type: Boolean, default: false },
@@ -232,22 +232,6 @@ export default {
       this.$emit(name, ...args)
     },
 
-    getFirstSlideStyle () {
-      const domElement = (this.$slots.default[0] || {}).elm
-      if (!domElement) return ''
-
-      const { attributes: { style: { value = '' } = {} } = {} } = domElement
-      return value
-    },
-
-    getLastSlideStyle () {
-      const domElement = (this.$slots.default[this.$slots.default.length - 1] || {}).elm
-      if (!domElement) return ''
-
-      const { attributes: { style: { value = '' } = {} } = {} } = domElement
-      return value
-    },
-
     getSlideData (index) {
       const slide = this.slides.list[index]
       let data = {}