How-To: Простая карусель з выкарыстаннем Vue!

Ці тое, што я даведаўся пра пабудову ўласнай каруселі.

https://acollectionofatoms.github.io/vue-carousel-example/

Каруселі, слайд-шоў альбо проста "паўзункі". Гэты паўсюдны кампанент карыстацкага інтэрфейсу знайшоў месца ў вэб-дызайне. Такім чынам, існуе мноства рэалізацый розных тэхналогій.

Вы ўбачыце, што Vue.js нічым не адрозніваецца.

Але!

Перш чым усталёўваць npm, калі ласка, улічыце колькасць энергіі, якую вы можаце атрымаць ад нестандартнага праекта Vue.

Увядзіце ...

Пераходная група

Тыя, хто паходзіць з React, могуць быць знаёмыя з паняццем пераходнай групы. Замест таго, каб быць дадаткам, пераходная група пастаўляецца з папярэдняй устаноўкай (лепш ці горш) з Vue, а багаты API пераходу сапраўды даступны адразу пасля новай усталёўкі.

Да невядомага пераходная група падобная на ашалёўку - абедзве дазваляюць анімацыю выдалення, складання і (у выпадку пераходнай групы) перамяшчэння элементаў у сабе.

Мы ўвойдзем у пераходную групу праз імгненне, але спачатку мы хацелі б азнаёміць вас з тым, што робіць так проста ствараць уласную карусель.

FLIP і Freedom (з іншага пакета)

Такім чынам, што такое карусель? У вас ёсць вялікі элемент (звычайна выява), які перамяшчаецца ў фокус (альбо выгляд). Прасцей кажучы, плаўнае перамяшчэнне элемента ў іншае месца, магчыма, з'яўляецца найбольш важнай часткай. Калі вы абнюхаеце пераходную вобласць дакументаў Vue, вы ўбачыце даволі цудоўную анімацыю.

Згодна з дакументамі ...

Гэта можа здацца магіяй, але пад капотам Vue выкарыстоўвае просты метад анімацыі, які называецца FLIP, каб плаўна перамяшчаць элементы са свайго старога становішча ў новае становішча з дапамогай пераўтварэнняў.

І гэта наш білет у краіну, якая не залежыць. Убудаваная тэхналогія FLIP ужо дае нам хлеб і масла таго, што робіць карусель каруселлю!

Адмова!

Перш чым пачаць, я проста хачу вылучыць слова ў загалоўку.

Гаворка ідзе пра двухмерную карусель з голымі касцямі. Той, які імгненна распазнае любы бягучы карыстальнік сусветнай павуціны. Нічым не адрозніваецца ад гэтай каруселі, якая знаходзіцца тут.

Там няма ніякіх празмернасцяў, і мы не рэалізуем функцыю сэнсарнага слайда. У гэтым артыкуле апісана толькі адна магчымая аснова каруселі.

Прыбярыце гэта з шляху ...

Пачаць

Для хуткага пачатку мы ўводзім чыт-код для роварнага тэрмінала AKA пры дапамозе афіцыйна падтрымоўванага інструмента рыштаванняў Vue.

Пасля ўстаноўкі CLI прататыпаванне становіцца лёгкім.

Просты шаблон webpack асабліва карысны для хуткіх прататыпаў і, такім чынам, ідэальна падыходзіць для таго, каб усё адбывалася.

Як толькі мы запрацуем, мы пачнем з App.vue

App.vue даволі

Так прыемна. Добра, выдалім гэта і пачнем спачатку.

м-м-м

І змяніце app.js адпаведна ...

І вось у нас новы старт:

Карціна нічога.

Добра, выдатна