Design

Swiper JS

အားလုံးပဲ မဂၤလာပါ။
ညီမကေတာ့ Spiceworks Myanmar မွာ Web Designer အျဖစ္ ဝင္ေရာက္လုပ္ကိုင္ေနတဲ့ နီလာေဌး ျဖစ္ပါတယ္။ ဒီေန႔မွာေတာ့ ညီမက slider ေတြကို design အမိုက္စားေတြနဲ႔ ဖန္တီးလို႔ရတဲ့ Swiper JS အေၾကာင္းကို မိတ္ဆက္ေပးခ်င္ပါတယ္။

What is Swiper?
Swiper ဆိုတာကေတာ့ hardware transition အျမန္ႏႈန္းေတြနဲ႔ free ရတဲ့ mobile touch slider တစ္ခု ျဖစ္ပါတယ္။ ေနာက္ၿပီး responsive လည္းရတဲ့အတြက္ mobile websites, mobile web apps နဲ႔ mobile native/hybrid apps ေတြမွာ သုံးဖို႔ ရည္႐ြယ္ထားပါတယ္။ ေနာက္ဆုံး version ကေတာ့ v7.3.1 ျဖစ္ၿပီး November 24, 2021 မွာ released လုပ္ခဲ့တာပဲ ျဖစ္ပါတယ္။

Design ေလးေတြလွၿပီး သုံးလို႔ေကာင္းေပမယ့္ လုံးဝ perfect ေတာ့ မျဖစ္ေသးပါဘူး။ သူ႔ရဲ႕ အားနည္းခ်က္ေလးေတြေတာ့ ရွိပါေသးတယ္။ Swiper က platform အားလုံးနဲ႔ ကိုက္ညီမႈမရွိပါဘူး။ Mobile touch slider ျဖစ္တဲ့အတြက္ ႐ိုးရွင္းတဲ့ mobile apps ေတြနဲ႔ platforms ေတြအတြက္ပဲ ရည္႐ြယ္ထားပါတယ္။

Swiper ကို ေအာက္ပါ framework မ်ားတြင္လည္း ထည့္သြင္း အသုံးျပဳႏိုင္ပါတယ္။

Swiper အေၾကာင္းကို အနည္းငယ္သိသြားၿပီဆိုေတာ့ Installation အပိုင္းကို ေျပာျပေပးခ်င္ပါတယ္။Installation လုပ္ရန္ နည္းလမ္း(၃) မ်ိဳးရွိတဲ့အတြက္ ကိုယ္ႏွစ္သက္ရာ နည္းလမ္းကို အသုံးျပဳႏိုင္ပါတယ္။ နည္းလမ္း(၃) မ်ိဳးကေတာ့
(၁) Install from NPM
(၂) Use Swiper from CDN
(၃) Download assets
တို႔ပဲ ျဖစ္ပါတယ္။ အေသးစိတ္ လုပ္ပုံလုပ္နည္းကိုေတာ့ ဒီ link (https://swiperjs.com/get-started) ကေန ေလ့လာႏိုင္ပါတယ္။

Installation လုပ္နည္း သိသြားၿပီဆိုေတာ့ Swiper ကို စၿပီး အသုံးျပဳလို႔ရပါၿပီ။ ညီမက နံပါတ္ (၂) နည္းလမ္းျဖစ္တဲ့ CDN link ကို အသုံးျပဳၿပီး slider တစ္ခုကို ဖန္တီးျပခ်င္ပါတယ္။

(၁) ကိုယ္ႀကိဳက္ႏွစ္သက္ရာ နာမည္နဲ႔ folder တစ္ခုေဆာက္ၿပီး html file တစ္ခု ေဆာက္ပါ။

(၂) Swiper ကို အသုံးျပဳဖို႔အတြက္ ေအာက္ပါ HTML Layout ကို ထည့္ဖို႔ လိုအပ္ပါတယ္။

(၃) ေနာက္ၿပီး ေအာက္မွာေပးထားတဲ့ သူ႔ရဲ႕ CDN link ေတြကို ခ်ိတ္ေပးပါ။

(၄) ေနာက္တစ္ဆင့္အေနနဲ႔ ကိုယ္အသုံးျပဳခ်င္တဲ့ slider design ကို ဒီ link (https://swiperjs.com/demos) ကေန တစ္ဆင့္ ေ႐ြးၿပီး အသုံးျပဳႏိုင္ပါတယ္။ ေ႐ြးၿပီးသြားၿပီဆိုရင္ JS အလုပ္လုပ္ဖို႔အတြက္ သူနဲ႔သက္ဆိုင္တဲ့ JS ကို ထည့္ေပးပါ။

(၅) ကိုယ္ႏွစ္သက္တဲ့ Design လိုခ်င္တယ္ဆိုရင္ custom css အေနနဲ႔ အသုံးျပဳ ေရးႏိုင္ပါတယ္။

အဆင့္ (၅) ၿပီးသြားၿပီဆိုရင္ေတာ့ slider တစ္ခု ရလာပါၿပီ။

တစ္ဆင့္ခ်င္း လုပ္သြားမယ္ဆိုရင္ အရမ္းလြယ္ကူၿပီး ႐ိုးရွင္းပါတယ္။ တျခားနည္းလမ္းနဲ႔ slider ေတြကို ဖန္တီးခ်င္တယ္ဆိုရင္လဲ WIT-Academy FB Page ရဲ႕ How To Create SLIDER ဆိုတဲ့ post မွာ အသုံးမ်ားဆုံး Website Link ေတြနဲ႔ မိတ္ဆက္ေပးထားတဲ့အတြက္ ဝင္ေရာက္ဖတ္ရႈေလ့လာႏိုင္ပါတယ္။

အခုလို အခ်ိန္ေပးၿပီး ဖတ္ရႈေပးတဲ့အတြက္လည္း ေက်းဇူးအမ်ားႀကီးတင္ပါတယ္။

 

 

 

 

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *