javascript - 无法向 3d slider 添加更多图像

Question

这是我的代码

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

.carousel-3d-container figure {
  margin: 0;
}

.carousel-3d-container figcaption {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  bottom: 0;
  position: absolute;
  bottom: 0;
  padding: 15px;
  font-size: 12px;
  min-width: 100%;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://wlada.github.io/vue-carousel-3d/js/vue.js"></script>
<script src="https://wlada.github.io/vue-carousel-3d/js/vue-carousel-3d.min.js"></script>
<div id="example">
  <carousel-3d :controls-visible="true" :clickable="false">
    <slide v-for="(slide, i) in slides" :index="i">
      <figure>
        <img src="images/IMG2.jpg">
      </figure>

    </slide>
  </carousel-3d>
</div>

在此我的代码工作完美，但我无法向 slider 添加更多图像，只能添加单个图像。我该如何解决这个问题。我正在尝试制作一个 3D slider ， slider 与该单个图像完美配合，但我需要添加更多图片

Answer 1

您应该使用 data slips:1 和 :display:3 来显示多张幻灯片

在此处查看更多详细信息> https://wlada.github.io/vue-carousel-3d/api/

请参阅下面的代码片段和解决方案

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

.carousel-3d-container figure {
  margin: 0;
}

.carousel-3d-container figcaption {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  bottom: 0;
  position: absolute;
  bottom: 0;
  padding: 15px;
  font-size: 12px;
  width: 100%;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://wlada.github.io/vue-carousel-3d/js/vue-carousel-3d.min.js"></script>
<script src="https://wlada.github.io/vue-carousel-3d/js/vue.js"></script>
<div id="example">
  <carousel-3d :controls-visible="true" :clickable="true" :display="3" :height="426">
    <slide v-for="(slide, i) in slides" :index="0">
      <figure>
        <img src="http://via.placeholder.com/350x150">
      </figure>
    </slide>
		   <slide v-for="(slide, i) in slides" :index="1">
      <figure>
        <img src="http://via.placeholder.com/350x250">
      </figure>
    </slide>
		   <slide v-for="(slide, i) in slides" :index="2">
      <figure>
        <img src="http://via.placeholder.com/350x350">
      </figure>
    </slide>
  </carousel-3d>
</div>