#update update on event callbacks

Wlada · May 30, 2017 · b49c4f8 · b49c4f8
1 parent bfe9e10
commit b49c4f8
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 29 deletions.
diff --git a/dist/vue-carousel-3d.min.js b/dist/vue-carousel-3d.min.js
diff --git a/docs/source/api/index.md b/docs/source/api/index.md
@@ -122,18 +122,3 @@ Slide inverse scaling
 
 * **Type**: `Number`
 * **Default**: `300`
-
-### onLastSlide
-
-Callback triggered on last slide
-
-* **Type**: `Function`
-* **param**: `index`
-
-### onSlideChange
-
-Callback triggered on slide changed
-
-* **Type**: `Function`
-* **param**: `index`
-
diff --git a/docs/source/examples/index.md b/docs/source/examples/index.md
@@ -8,6 +8,11 @@ Without any options configured and seven slides added to 3D Carousel
 
 <script async src="//jsfiddle.net/Wlada/kqen0yba/embed/result,js,html,css/?accentColor=405671"></script>
 
+## Callbacks
+
+Callbacks added, seven slides added to 3D Carousel
+
+<script async src="//jsfiddle.net/Wlada/dtwg9kr9/embed/result,js,html,css/?accentColor=405671"></script>
 
 ## Controls
 

diff --git a/docs/themes/vue/source/js/vue-carousel-3d.min.js b/docs/themes/vue/source/js/vue-carousel-3d.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vue-carousel-3d",
-    "version": "0.1.9",
+    "version": "0.1.10",
     "description": "Beautiful, flexible and touch supported 3D Carousel for Vue.js",
     "main": "dist/vue-carousel-3d.min.js",
     "scripts": {

diff --git a/play/index.js b/play/index.js
@@ -255,9 +255,9 @@ play('Carousel3d', module)
 
     .add("callbacks through emit", {
         template: `<carousel-3d
-                      @afterSlideChanged="onAfterSlideChanged"
-                      @lastSlide="onLastSlide"
-                      @slideChange="onSlideChange">
+                      @before-slide-change="onSlideChange"
+                      @after-slide-change="onAfterSlideChanged"
+                      @last-slide="onLastSlide">
             <slide v-for="(slide, i) in slides" :index="i">
                 <img :src="slide.src">
             </slide>
@@ -273,13 +273,13 @@ play('Carousel3d', module)
         },
         methods: {
             onAfterSlideChanged(index){
-                console.log('@afterSlideChanged Callback Triggered', 'Slide Index ' + index)
+                console.log('@after-slide-changed Callback Triggered', 'Slide Index ' + index)
             },
             onSlideChange(index){
-                console.log('@slideChange Callback Triggered', 'Slide Index ' + index)
+                console.log('@before-slide-change Callback Triggered', 'Slide Index ' + index)
             },
             onLastSlide(index){
-                console.log('@lastSlide Callback Triggered', 'Slide Index ' + index)
+                console.log('@last-slide Callback Triggered', 'Slide Index ' + index)
             }
         }
     })
diff --git a/src/Carousel3d.vue b/src/Carousel3d.vue
@@ -212,10 +212,10 @@
                     }
                     this.onLastSlide(this.currentIndex)
 
-                    this.$emit('lastSlide', this.currentIndex)
+                    this.$emit('last-slide', this.currentIndex)
                 }
 
-                this.$emit('slideChange', this.currentIndex)
+                this.$emit('before-slide-change', this.currentIndex)
 
                 setTimeout(() => this.animationEnd(), this.animationSpeed)
             },
@@ -253,7 +253,7 @@
                 }
                 this.onSlideChange(this.currentIndex)
 
-                this.$emit('afterSlideChanged', this.currentIndex)
+                this.$emit('after-slide-change', this.currentIndex)
             },
             /**
              * Trigger actions when mouse is released