如何正確將照片添加到 Vue Carousel 3D slider？

Question

我正在嘗試找出 Vue Carousel 3D文檔，但無法弄清楚如何在每張幻燈片上顯示一個圖像。 讓我解釋一下：我想制作一個 slider，就像 Controls Customized 示例中的文檔一樣。

有這樣的建築

 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>

和布局一樣

我的結果

我還嘗試在 slider 標簽中使用幾個圖形標簽，在圖中包含圖片，但同樣，不是那樣的。 請幫我弄清楚！ 網站本身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 。