I'm currently exploring the Vue Carousel 3D documentation and I am having trouble displaying a single image on each slide. Let me elaborate: I aim to create a slider similar to the one shown in the Controls Customized example in the documentation.
This is the code snippet that I came across:
new Vue({
el: '#example',
data: {
slides: 8
},
components: {
'carousel-3d': window['carousel-3d'].Carousel3d,
'slide': window['carousel-3d'].Slide
}
})<div id="example">
<carousel-3d :controls-visible="true" :controls-prev-html="'❬ '" :controls-next-html="'❭'" :controls-width="30" :controls-height="60" :clickable="false">
<slide v-for="(slide, i) in slides" :index="i">
<figure>
<img src="https://placehold.it/360x270">
</figure>
</slide>
</carousel-3d>
</div>However, upon trying to implement this code as it is displayed in the example, I ended up with sliders showing duplicate images. I also couldn't grasp the purpose of using: index = "i". Initially, I thought it was specifying image priorities, but this assumption proved to be incorrect.
<div id="example">
<carousel-3d :controls-visible="true" :controls-prev-html="'❬ '" :controls-next-html="'❭'" :controls-width="30" :controls-height="60" :clickable="false">
<slide v-for="(slide, i) in slides" :index="i">
<figure>
<img src="/img/sliders/1.jpg">
</figure>
</slide>
<slide v-for="(slide, i) in slides" :index="i">
<figure>
<img src="/img/sliders/2.jpg">
</figure>
</slide>
<slide v-for="(slide, i) in slides" :index="i">
<figure>
<img src="/img/sliders/3.jpg">
</figure>
</slide>
<slide v-for="(slide, i) in slides" :index="i">
<figure>
<img src="/img/sliders/4.jpg">
</figure>
</slide>
(...more image slides here...)
</carousel-3d>
</div>I even attempted using multiple figure tags within the slider tag, encapsulating different pictures in each figure, but that didn't resolve the issue either. Can someone provide insights on this matter, please? The website link: