@Norum

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

Пытаюсь разобраться в документацию 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
  }
})


5fee81c045480447576602.jpeg

Но при попытке использовать конструкцию, как в примере, у меня получилось вот так и в итоге отображаются слайдеры с одной и той же картинкой. Также я не понял, что такое :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>

5fee81fbd3e82134676437.jpeg

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

5fee820cc2b6a509216828.jpeg

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

Сам сайт c96180og.beget.tech
  • Вопрос задан
  • 43 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
data: () => ({
  slides: [
    'путь к первой картинке',
    'путь ко второй картинке',
    ...
  ],
}),

<slide v-for="(n, i) in slides" :index="i">
  <figure>
    <img :src="n">
  </figure>
</slide>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы