Vue Carousel 3d - Arrow controls enabled with images and captions

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 Plant</button>
  <button @click="removeSlide">Remove Plant</button>
  <hr>
   <div class="plant">
    <h1> Выберите Вид растения</h1> 
    </div>
  <carousel-3d :count="slides.length">
    <slide v-for="(slide, i) in slides" :index="i">     
       <h1>{{slide.name}}</h1>
       <img v-bind:src="slide.src" />     
      
    </slide>
  </carousel-3d>
</div>
<div id="example1">
   
  <carousel-3d :count="slides.length">
    <slide v-for="(slide, i) in slides" :index="i">
      
       <img v-bind:src="slide.src" />
       
      
    </slide>
   
  </carousel-3d>
   <div class="pot">
    <h1 >Выберите Модель горшка</h1> 
    </div>
  <hr>
   <button @click="addSlide">Add Pot</button>
  <button @click="removeSlide">Remove Pot</button>
</div>
<!--https://drive.google.com/open?id=159-aghLV0n-pgvIpjDTbQOS9zzgUdqhK   b
--https://drive.google.com/open?id=1kDGNN0NZmZeIoakGTFJHsrBld7Oa2RLA   v

CSS

button {
  padding: 15px 10px;
}
.carousel-3d-slide {
  padding: 0px;
}
.carousel-3d-container {
  margin: 0 auto !important;
}
.pot, .plant {
    width: 360px; /* Ширина элемента в пикселах */
    padding: 0px; /* Поля вокруг текста */
    margin: auto; /* Выравниваем по центру */
    background: #fc0; /* Цвет фона */
   }

JavaScript

new Vue({
  el: '#example',
  data: {
    slides: [{
      name: 'Цветок 1',
      src: 'https://lh5.googleusercontent.com/ROVUciF62dPdXNDgPTuekIgLB5hDIpjPlWC--3meP7jGerjugPnHfdcARLl7YtLY_OuR4vNq5Xb5XLFeCrx7=w1920-h888'
    },
      {name: 'Цветок 2',
      src: 'https://lh6.googleusercontent.com/MrESTli5NC_97O8RmOagQNcCSU0XN6KaKrFZU1nVhuTohZwbk1vHH-Ro90ufXBDjmQWDTaA7IqkBRUYmHwke=w1920-h968'},
      {
      name: 'Цветок 3',
      src: 'https://lh5.googleusercontent.com/4QtabpWJdtSH5PwQB8EmC1kedHV2-zEGqAyGXcX7TumGM6OKdaRi6lqyevvQOfDRyA7d9CFwDJlL-HwpZbfj=w1920-h673'
      }
     ],
     
  },
  
  components: {
    'carousel-3d': Carousel3d.Carousel3d,
    'slide': Carousel3d.Slide
  },
  methods: {
    addSlide() {
        this.slides.push({
          name: 'Slide name X'
        })
      },
      removeSlide() {
        this.slides.pop()
      }
  }
})
new Vue({
  el: '#example1',
  data: {
    slides: [{
      name: 'Модель горшка',
      src:'https://drive.google.com/file/d/14lhYF5AVby3XkJmX3XZMmZuxqZ-Hvj6e/view?usp=sharing'
    }, {
      name: 'Slide name 2',
      src:'https://drive.google.com/file/d/1Fg_g_EwV-eF82xOsmE4lGawezsoebeFB/view?usp=sharing'
    }, {
      name: 'Slide name 3',
      src:'https://drive.google.com/file/d/11tHS_N82tJbFmWJXmnCg5HuE2EeVMeDM/view?usp=sharing'
    }],
     
  },
  
  components: {
    'carousel-3d': Carousel3d.Carousel3d,
    'slide': Carousel3d.Slide
  },
  methods: {
    addSlide() {
        this.slides.push({
          name: 'Slide name X'
        })
      },
      removeSlide() {
        this.slides.pop()
      }
  }
})