[ВАЖНО - Читай описание] Универсальный компонент Слайдер (carousel) на Vue.js без плагинов!

[@stt1632]

Вы Лучший! Спасибо за ваши труды!!!

[@Vlad-em1bx]

Я даже не знаю какие мне подобрать слова чтобы отблагодарить Вас за такой урок!
Однозначно, лайк, подписка, видео на всякий случай скачал к себе на пк ;).
Это лучший урок по тому как сделать слайдер на vue.

[@sony1939]

Все получилось, кроме интервала. Мощно!

[@innadragota696]

тоже проблема, он не меняется сам(

[@НикитаКорниенко-й6р]

чувак, ты топ! Не закидывай канал! Я только начал Vue а уже так много понял!

[@gofrontend2220]

Никита Корниенко не закрываю) жду vue 3, там сразу будет куча тем на разбор:)

[@ekaterinaivasenko2609]

Спасибо огромное, всё супер понятно!

[@gofrontend2220]

Ekaterina Ivasenko рад стараться:)

[@peterparker3794]

просто и хорошо работает, спасибо.

[@fessan8918]

все таки использование стрелочных функций делает проще код. mounted() {
if (this.interval > 0) {
setInterval(() => {
this.nextSlide();
}, this.interval);
}
},

[@Kempriol]

в setInterval можно было использовать стрелочную функцию () => {} и тогда не надо передавать контекст this

[@IceSlamRu]

Благодарю за слайдер! Офигенная вещь!
Оптимизировал под бутстрап - вообще супер! во время повторения слайдера и оптимизации под себя хотя бы понял как передаются данные через Props
Разрешите выложу текстовый вариант с заготовками на своем сайте с линком на ваш видос?

[@gofrontend2220]

IceSlam да ради бога:)

[@orcsamuro9687]

Спасибо, было полезно

[@slaincore]

Бля, мужик, это ТОП, это просто ТОП

[@iso1286]

Если создаёте новый блок div(с классом) с помощью emmet, то само слово div можете упустить, emmet автоматом подставит

[@migiminsk6205]

Все супер, но жаль что слайдер без цикла, куда приятнее выглядит не скролл к первому слайду, а переход на первый с анимацией как на следующий

[@Zimmer778]

Не могли бы Вы продемонстрировать данный код с циклом?

[@vitasergeeva8553]

а как карусель перенести на саму html-страницу к другим элементам? например, к меню, текстовым блокам и т.д.?

[@ИгорьКрысов-р8ь]

Спасибо!

[@gofrontend2220]

Игорь Крысов welcome:)

[@oleg_thomas]

Парни, а там можно будет прикрутить адаптивность под экраны?

[@ПИТБАЙКерскийКЛУБ]

Был бы исходник, было бы вообще шикарно! data functions should return an object: - у меня такая ошибка на передаче v-for="item in carousel_data" - вот не могу решить её.

[@gofrontend2220]

MotoHIRO думаю дело в том как вы опцию data в компоненте организовали. Должно быть например так : data() {return {}}

[@ПИТБАЙКерскийКЛУБ]

@@gofrontend2220 data () {
return {}
} - вот так, а вот скрины - drive.google.com/open?id=1FNCyITGSLJTc5CkGSjbgcnnX-eHWPMw8 - тут три картинки.

[@ПИТБАЙКерскийКЛУБ]

@@gofrontend2220 лошарик я, не описал return в data в одном из компонентов. Спасибо, продолжаю!

[@anastasiyachuprey5551]

как отремонтировать при responsiv?

[@ira_lys_enko]

спасибо!!

[@annashalbuzova8124]

Подскажите, можно ли вывести в этом слайдере больше одного элемента при скроллинге? И можно ли использовать v-for цикл для отображения элементов?

[@romastyi83]

Насколько юзабельный слайдер в реальных проектах? Или это просто так чтобы типо писать на vue?

[@romanmed9035]

а просмотр маленьких картинок. и зачем изобретать если есть tiny-slider?

[@romanvasin5702]

Почему когда задаю slider - display: flex; то он мне показывает 2 слайда в одном блоке а не скрывает его

[@ant3413]

overflow:hidden нужно!!!!

[@ruslankarimov5643]

а как сделать чтобы была не одна, а несколько картинок?

[@Laraptxe]

Нужно увеличить ширину блока с img

[@николайтамазенко]

почему не показывает следующее фото

[@KinoTahlillar]

разобралcя?)

[@gofrontend2220]

! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆

[@tetianakulieshova1479]

а как передать картинки с бэкенда в ларавел с использованием webpack?

[@gofrontend2220]

Tanya Hryf с ларавел не работал, но думаю все примерно как обычно: делаете get запрос к api, получаете в ответе json с урлами картинок, показываете эти img :src=“url” в компоненте

[@tetianakulieshova1479]

@@gofrontend2220 спасибо за ответ) я разобралась, можно без api, просто в blade.php в темплейт передать данные: , и затем использовать в компоненте

[@Денис-в5д5ь]

@@tetianakulieshova1479 Это не лучшая практика. Вы так не сможете сделать, если полностью на фронтенд фреймворке разрабатываете.

[@maximdev4021]

@@Денис-в5д5ь это обычная практика, использовать шаблон лавареля blade, который предназначен для интеграции веба. Почему бы туда не интегрировать Vue или тот же React ?

[@alexcherepanov6152]

тот момент когда можно подкл за 5 минут swiper и не ломать голову)

[@РачилаАлександр]

К сожалению не 5 минут( Swiper теперь доступен только для Vue 3

[@МарияДуванова-э1т]

Для новичков непонятно.

[@maximdev4021]

дизлайк за то, что не прикрепил ссылку на гитхаб код