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

Question

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

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

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>

Как в макете

Как у меня Так же пробовал использовать несколько тэгов figure в тэге slider, заключая в figure картинки, но опять не то. Помогите разобраться, пожалуйста! Сам сайт http://c96180og.beget.tech/

Answer 1

Начнем с того что ты должен понимать как пользоваться v-for. slides должен быть массивом в котором могуть быть данные, например:

slides:['/img/sliders/4.jpg','/img/sliders/3.jpg','/img/sliders/2.jpg'....]

И тогда ты будешь перебирать уже массив путей к картинкам (на выводе будут у каждой карточки своя картинка)

   <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="slide">
      </figure>
    </slide>
  </carousel-3d>
</div>

значение i это индекс объекта в массиве

БЛОГ НА HUSL

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

Ответы (1 шт):