不能更多圖片到3D滑塊添加

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>

在此我的代碼工作完美，但我不能添加更多的圖像滑塊只有我能添加一個image.how我可以解決this.Iam試圖使一個3D滑塊滑塊完美的單像，但我需要添加更多的圖像

Answer 1

你應該使用data slides: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> 
 
\t \t <slide v-for="(slide, i) in slides" :index="1"> 
 
     <figure> 
 
     <img src="http://via.placeholder.com/350x250"> 
 
     </figure> 
 
    </slide> 
 
\t \t <slide v-for="(slide, i) in slides" :index="2"> 
 
     <figure> 
 
     <img src="http://via.placeholder.com/350x350"> 
 
     </figure> 
 
    </slide> 
 
    </carousel-3d> 
 
</div>