Форум программистов, компьютерный форум, киберфорум
JavaScript: Vue.js
Войти
Регистрация
Восстановить пароль
 
0 / 0 / 0
Регистрация: 27.03.2018
Сообщений: 55
1

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

01.01.2021, 02:00. Просмотров 379. Ответов 1
Метки нет (Все метки)

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

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

HTML5
1
2
3
4
5
6
7
8
9
10
<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>
Javascript
1
2
3
4
5
6
7
8
9
10
new Vue({
  el: '#example',
  data: {
    slides: 8
  },
  components: {
    'carousel-3d': window['carousel-3d'].Carousel3d,
    'slide': window['carousel-3d'].Slide
  }
})
Но при попытке использовать конструкцию, как в примере, у меня получилось вот так и в итоге отображаются слайдеры с одной и той же картинкой. Так же я не понял, что такое :index="i". Я думал это приоритет картинок, но я оказался не прав.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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 картинки, но опять не то. Помогите разобраться, пожалуйста!
0
Миниатюры
Как правильно добавить фотографии в слайдер Vue Carousel 3D?   Как правильно добавить фотографии в слайдер Vue Carousel 3D?   Как правильно добавить фотографии в слайдер Vue Carousel 3D?  

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
01.01.2021, 02:00
Ответы с готовыми решениями:

Слайдер owl-carousel листает в пустоту
Добрый день, такой вопрос, почему owl-carousel листает в пустоту?

Неправильно работает слайдер owl-carousel, в чем причина?
При пролистывании слайды не прячутся (не исчезают). Должно быть видно только 4 слайда, а сейчас их...

Как добавить картинки через props в React Carousel Image Gallery?
Как добавить картинки через props в React Carousel Image Gallery ?

Как правильно регестрировать/подключать плагины Vue.js (NUXT)
Привет! Нужна помощь в подключении плагина. Вот сам плагин...

__________________

Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
1
0 / 0 / 0
Регистрация: 27.03.2018
Сообщений: 55
01.01.2021, 02:14  [ТС] 2
Сам сайт http://c96180og.beget.tech/
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.01.2021, 02:14

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Как правильно подключить Vue.js без конфликта с app.js ?
И для чего вообще нужен app.js ? Делаю простой blade, подключаю в нем же Vue.js...Событие...

Как добавить карту на сайт при работе с vue.js
Здравствуйте! Не могу добавить карту на свой сайт. Вот код сайта: index.html &lt;!DOCTYPE...

Слайдер owl carousel растянуть на всю ширину экрана под моб
Ребят, привет! Как мне слайдер на главной сделать так, что бы он полностью показывался на всю...

Как было бы правильно отканировать фотографии
Я знаю, что тема хоть и немного, но заезженная, но все таки. Решил отканировать старые фотографии,...

Слайдер берет фотографии только с первой страницы
Подскажите поставил слайдер на сайт но он берет фото с рубрики достопримечательности но только с...

Как добавить слайдер (Slider) в C#?
Делаю мультимедийный плеер. Хочу добавить слайдер для прокрутки музыки. Не получается. Использую...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.