Vue Carousel 3d - Dynamic props

by Bhavik Bamania

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js"></script>
<script src="https://rawgit.com/Wlada/vue-carousel-3d/master/dist/vue-carousel-3d.min.js"></script>
<div id="example">
  <button @click="addSlide">Add Slide</button>
  <button @click="removeSlide">Remove Slide</button>
  <hr>
  <carousel-3d :count="slides.length" @after-slide-change="onAfterSlideChange"
                                @before-slide-change="onBeforeSlideChange" @last-slide="onLastSlide">
    <slide v-for="(slide, i) in slides" :index="i">
      <h1>{{slide.name}}</h1>
    </slide>
  </carousel-3d>
</div>

CSS

button {
  padding: 15px 10px;
}
.carousel-3d-slide {
  padding: 20px;
}

JavaScript

new Vue({
  el: '#example',
  data: {
  isActive: 0,
	doc_id: '',
    slides: [{
      name: 'Slide name 1'
    }, {
      name: 'Slide name 2'
    }]
  },
  components: {
    'carousel-3d': Carousel3d.Carousel3d,
    'slide': Carousel3d.Slide
  },
  methods: {
    addSlide() {
        this.slides.push({
          name: 'Slide name X'
        })
      },
      removeSlide() {
        this.slides.splice(this.isActive,1)
        this.onAfterSlideChange(this.isActive)
      },
      onAfterSlideChange(index) {
                console.log('here');
                this.isActive = index;
                this.doc_id = this.slides[index];
            },
            onBeforeSlideChange(index) {
                this.isActive = index;
                this.doc_id = this.slides[index]
            },
            onLastSlide(index) {
                this.isActive = index;
                this.doc_id = this.slides[index]
            },
  }
})