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

I'm trying to figure out the Vue Carousel 3D documentation and can't figure out how to get one image displayed on each slide. Let me explain: I want to make a slider like in the documentation in the Controls Customized example.

There is such a construction

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

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. I also did not understand what is: index = "i". I thought it was the priority of pictures, but I was wrong.

<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

I also tried to use several figure tags in the slider tag, enclosing pictures in the figure, but again, not that. Help me figure it out, please! The site itself http://c96180og.beget.tech/

https://stackoverflow.com/questions/65526605/how-to-add-photos-to-vue-carousel-3d-slider-correctly January 01, 2021 at 08:52AM