无法向3D滑块添加更多图像

Question

这是我的代码

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在这个我的代码工作完美，但我不能添加更多的图像到滑块只有我可以添加一个图像。我可以解决这个问题。我试图制作一个3D滑块滑块与单一图像完美配合，但我需要添加更多图片

Answer 1

您应该使用data slides:1和:display:3来制作多张幻灯片

在此处查看更多详情＆gt; https://wlada.github.io/vue-carousel-3d/api/

使用解决方案

查看下面的代码段

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;