Coin-Slider from Workshop.RS
ဒီတစ်ခေါက်တော့ Wordshop.rs ရဲ့ Coin-Slider လေးတစ်ခုလောက်ကိုဆောက်ကြည့်ရအောင်။ ကျွန်တော်တွေ့ဖူးသမျှ Slider တွေထဲမှာတော့ အလွယ်ဆုံးလို့ပြောလို့ရတယ်။ မလုပ်ရင် အရင်ဆုံး DEMO လေးကိုအရင်ကြည့်ရအောင်။
အရင်ဆုံး HTML တစ်ခုတည်ဆောက်လိုက်ပါမယ်။ ပြီးရင် jQuery Files တွေ CSS တွေ ချိတ်ကြရအောင်။
<script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="coin-slider.min.js"></script> <link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
အဲဒီ ဖိုင်သုံးခုကို ဒီမှာ ဒေါင်းလိုက်ပါ။ Slider လုပ်ဖို့အတွက် Div နဲ့ Image တွေထည့်ပါမယ်။
<div id='coin-slider'> <a href="img01_url" target="_blank"> <img src='img01.jpg' > <span> Description for img01 </span> </a> ...... ...... <a href="imgN_url"> <img src='imgN.jpg' > <span> Description for imgN </span> </a> </div>
id ကို coin-slider လို့ပေးပါမယ်။ ပြီးရင် a link တစ်ခုပါမယ်။ Slide လုပ်ဖို့အတွက် Image တစ်ခုပါမယ်။ Span ကိုထားထားတာကတော့ Image အပေါ်ကနေ Opacity လျှော့ပြီး ပုံရဲ့ Description ကိုပြဖို့အတွက်ပါ။ အဲ့ဒီမှာသုံးထားတဲ့ N ကတော့ မသိကိန်းပါ။ မိမိနှစ်သက်သလောက် Slider အတွက် Div နဲ့ Images တွေထည့်နိုင်တယ်လို့အဓိပ္ပာယ်ရပါတယ်။ ပြီးရင် Script တစ်ခုရေးပါမယ်။
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider();
});
</script>
အဲ့ဒါဆိုရင်တော့ ကျွန်တော်တို့ Slider ကို စမြင်ရပါပြီ။ သူ့ဟာသူ အလုပ်လုပ်နေတာကိုတွေ့ရမှာပါ။ Slider အတွက် သီးသန့် CSS ရေးပေးစရာမလိုပါဘူး။ ဒါပေမယ့် မိမိနှစ်သက်သလို ပြန်လည်ပြုပြင်လို့လည်းရပါတယ်။ Height တွေ Width တွေပြင်မလား? အားလုံးကို jQuery Function ထဲမှာလုပ်နိုင်ပါတယ်။ ဥပမာ ဒီလိုမျိုးပေါ့။
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
});
</script>
အောက်ကဟာတွေကတော့ Slider ရဲ့ Options အားလုံးပါပဲ။
width: 565, // width of slider panel height: 290, // height of slider panel spw: 7, // squares per width sph: 5, // squares per height delay: 3000, // delay between images in ms sDelay: 30, // delay beetwen squares in ms opacity: 0.7, // opacity of title and navigation titleSpeed: 500, // speed of title appereance in ms effect: '', // random, swirl, rain, straight navigation: true, // prev next and buttons links : true, // show images as links hoverPause: true // pause on hover
ကျွန်တော်အရင် ဒါကိုမတွေ့ခင်တုန်းကတော့ Slide.js နဲ့ Slider တွေကိုလုပ်ဖြစ်ပါတယ်။ Slide.js ကဘာကောင်းသလဲဆိုတော့ မိမိနှစ်သက်သလို Slider ကို ဒေါင်လိုက်လုပ်မှာလား? အလျားလိုက်လုပ်ချင်သလား? ဘယ်အရောင်ထားချင်သလဲ? ကိုယ့်ဟာကိုယ် CSS ရေးရမှာပါ။ Slide.js အကြောင်းကို နောက်အားရင် တင်ပေးပါအုံးမယ်။ လောလောဆည်တော့ ဒီ Coin-Slider ကိုအသုံးပြုပြီး Website တွေရေးနိုင်ပါစေ။
Credit: Wordshop.RS
Facebook comments:
