如何将照片正确添加到 Vue Carousel 3D 滑块？

问题描述

我正在尝试找出 Vue Carousel 3D documentation，但不知道如何在每张幻灯片上显示一张图像。让我解释一下：我想制作一个类似于控件自定义示例中文档中的滑块。

有这样的构造

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>

As in the example

但是当我尝试使用构造时，如示例中所示，我得到了它，结果显示具有相同图片的滑块。我也不明白什么是：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>

As in the layout

My result

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

解决方法

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 属性是该组件上的一个 prop，它引用循环中的 index。

html javascript vue.js