如何将照片正确添加到Vue旋转木马3D滑块

Question

我正试图弄清楚Vue Carousel 3D文档，但无法弄清楚如何在每张幻灯片上显示一张图像。让我解释一下：我想制作一个滑块，就像控件自定义示例中的文档一样。

有这样一个建筑

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>

如示例

但当我尝试使用该结构时，就像在示例中一样，我得到了这样的结果，结果显示了具有相同图片的滑块。我也不明白什么是：index＝"；i"；。我以为这是照片的优先顺序，但我错了。

<div id="example">
<carousel-3d :controls-visible="true" :controls-prev-html="'&#10092; '" :controls-next-html="'&#10093;'" :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>
<slide v-for="(slide, i) in slides" :index="i">
<figure>
<img src="/img/sliders/5.jpg">
</figure>
</slide>
<slide v-for="(slide, i) in slides" :index="i">
<figure>
<img src="/img/sliders/6.jpg">
</figure>
</slide>
<slide v-for="(slide, i) in slides" :index="i">
<figure>
<img src="/img/sliders/7.jpg">
</figure>
</slide>
</carousel-3d>
</div>

如布局

我的结果

我还尝试在滑块标签中使用几个数字标签，将图片放在图中，但同样不是这样。请帮我弄清楚！网站本身http://c96180og.beget.tech/

Answer 1

v-for的目的是循环通过一些绑定的数据，因此多个v-for将挫败其背后的推理。相反，将slides更改为数组。例如，包含一些图像数据的对象阵列：

slides: [
{ id: 1, src: '/img/sliders/1.jpg' },
{ id: 2, src: '/img/sliders/2.jpg' },
{ id: 3, src: '/img/sliders/3.jpg' },
{ id: 4, src: '/img/sliders/4.jpg' },
{ id: 5, src: '/img/sliders/5.jpg' },
{ id: 6, src: '/img/sliders/6.jpg' },
{ id: 7, src: '/img/sliders/7.jpg' },
]

^{使用具有id和src属性的对象数组的示例。如果您愿意，您可以使用仅包含src字符串的数组}

现在，这些可以使用单个v-for:进行渲染

<slide v-for="(slide, i) in slides" :index="i">
<figure>
<img :src="slide.src">
</figure>
</slide>

index属性是引用循环中index的组件上的道具。