Vue Carousel 3d -Width and height configured

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">
  <carousel-3d :width="200" :height="400">
    <slide v-for="(slide, i) in slides" :index="i">
      <span class="title">You know</span>
      <p>You know, being a test pilot isn't always the healthiest business in the world.</p>
    </slide>
  </carousel-3d>
</div>

SCSS

.carousel-3d-container {
  .carousel-3d-slide {
    padding: 20px;
    
    .title { font-size: 22px; }
  }
}

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()
      }
  }
})