<div id="example">
  <carousel-3d :perspective="0" :space="100" :display="5" :controls-visible="true" :controls-prev-html="'❬ '" :controls-next-html="'❭'" :controls-width="30" :controls-height="60" :clickable="false">
    <slide :index="0">
      <figure>
        это 1
        <img src="https://placehold.it/300x200">
      </figure>
    </slide>
    <slide :index="1">
      <figure>
        это 2
        <img src="https://placehold.it/300x200">
      </figure>
    </slide>
    <slide :index="2">
      <figure>
        это 3
        <img src="https://placehold.it/300x200">
      </figure>
    </slide>
<slide :index="3">
      <figure>
        это 4
        <img src="https://placehold.it/300x200">
      </figure>
    </slide>
<slide :index="4">
      <figure>
        это 5
        <img src="https://placehold.it/300x200">
      </figure>
    </slide>
<slide :index="5">
      <figure>
        это 6
        <img src="https://placehold.it/300x200">
      </figure>
    </slide>
<slide :index="6">
      <figure>
        это 7
        <img src="https://placehold.it/300x200">
      </figure>
    </slide>
<slide :index="7">
      <figure>
        это 8
        <img src="https://placehold.it/300x200">
      </figure>
    </slide>
  </carousel-3d>
</div>

new Vue({
  el: '#example',
  data: {
    slides: 8
  },
  components: {
    'carousel-3d': window['carousel-3d'].Carousel3d,
    'slide': window['carousel-3d'].Slide
  }
})