Vue Carousel 3d - Dynamic props

by denvut

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">
    <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: {
    slides: [{
      name: 'Slide name 1',
      img: 'https://placehold.it/360x270'
    }, {
      name: 'Slide name 2'
    }, {
      name: 'Slide name 3'
    }, {
      name: 'Slide name 4'
    }, {
      name: 'Slide name 5'
    }, {
      name: 'Slide name 6'
    }, {
      name: 'Slide name 7'
    }]
  },
  components: {
    'carousel-3d': Carousel3d.Carousel3d,
    'slide': Carousel3d.Slide
  },
  methods: {
    addSlide() {
        this.slides.push({
          name: 'Slide name X'
        })
      },
      removeSlide() {
        this.slides.pop()
      }
  }
})