How to properly add photos to Vue Carousel 3D slider?

Question

Vue.js

I'm trying to understand the documentation of Vue Carousel 3D and I can't figure out how to make it so that one picture is displayed in each slide. Let me explain: I want to make a slider, as in the documentation in the Controls Customized example.

There's a structure like this:

<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>

new Vue({
  el: '#example',
  data: {
    slides: 8
  },
  components: {
    'carousel-3d': window['carousel-3d'].Carousel3d,
    'slide': window['carousel-3d'].Slide
  }
})

But when I tried to use the construction, as in the example, I got it like this and as a result, sliders with the same picture are displayed. Also I didn't understand what :index="i" is. I thought it was the priority of pictures, but I was wrong.

<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>
                    <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>

And here's how it should turn out . I



also tried to use several figure tags in the slider tag, enclosing images in figures, but again, not that. Help to understand, please.

The website c96180og.beget.tech

Answer 1

data: () => ({
  slides: [
    'путь к первой картинке',
    'путь ко второй картинке',
    ...
  ],
}),

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