JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<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 class="col-sm-6 text-center">
  <div id="example">
    <carousel-3d>
      <slide v-for="(slide, i) in slides" :index="i">
        <img src="https://placehold.it/200x200">
      </slide>
    </carousel-3d>
  </div>
</div>
<div class="col-sm-6 text-center">
  <div id="example2">
    <carousel-3d>
      <slide v-for="(slide, i) in slides" :index="i">
        <img src="https://placehold.it/200x200">
      </slide>
    </carousel-3d>
  </div>
</div>

Vue

new Vue({
  el: '#example',
  data: {
    slides: 7
  },
  components: {
    'carousel-3d': Carousel3d.Carousel3d,
    'slide': Carousel3d.Slide
  }
});
new Vue({
  el: '#example2',
  data: {
    slides: 7
  },
  components: {
    'carousel-3d': Carousel3d.Carousel3d,
    'slide': Carousel3d.Slide
  }
})