Merge pull request #238 from rDr4g0n/feature/vue-events

Bind swiper events to vuejs events

Author: surmon-china

dist/vue-awesome-swiper.js

@@ -40,6 +40,36 @@
       configurable: true
     })
   }
+  // as of swiper 4.0.7
+  // http://idangero.us/swiper/api/#events
+  const DEFAULT_EVENTS = [
+    'beforeDestroy',
+    'slideChange',
+    'slideChangeTransitionStart',
+    'slideChangeTransitionEnd',
+    'slideNextTransitionStart',
+    'slideNextTransitionEnd',
+    'slidePrevTransitionStart',
+    'slidePrevTransitionEnd',
+    'transitionStart',
+    'transitionEnd',
+    'touchStart',
+    'touchMove',
+    'touchMoveOpposite',
+    'sliderMove',
+    'touchEnd',
+    'click',
+    'tap',
+    'doubleTap',
+    'imagesReady',
+    'progress',
+    'reachBeginning',
+    'reachEnd',
+    'fromEdge',
+    'setTranslate',
+    'setTransition',
+    'resize'
+  ]
 
   // export
   export default {
@@ -64,6 +94,16 @@
       mountInstance() {
         const swiperOptions = Object.assign({}, this.globalOptions, this.options)
         this.swiper = new Swiper(this.$el, swiperOptions)
+        this.bindEvents()
+      },
+      bindEvents() {
+        const vm = this
+        DEFAULT_EVENTS.forEach(eventName => {
+          this.swiper.on(eventName, function() {
+            // NOTE - `this` is the swiper instance
+            vm.$emit(eventName, this, ...arguments)
+          })
+        })
       }
     },
     data() {