Как правильно добавить фотографии в слайдер Vue Carousel 3D?

Question

[Norum]

Пытаюсь разобраться в документацию Vue Carousel 3D и не могу понять, как сделать так, чтобы в каждом слайде отображалась одна картинка. Поясню: хочу сделать слайдер, как в документации в примере Controls Customised.

Там такая конструкция:

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

Но при попытке использовать конструкцию, как в примере, у меня получилось вот так и в итоге отображаются слайдеры с одной и той же картинкой. Также я не понял, что такое :index="i". Я думал это приоритет картинок, но я оказался не прав.

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

А вот как должно получиться



Также пробовал использовать несколько тэгов figure в тэге slider, заключая в figure картинки, но опять не то. Помогите разобраться, пожалуйста.

Сам сайт c96180og.beget.tech

Answer 1

[0xD34F]

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

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