Slider with Slide.js
အရင်တစ်ခေါက်က Coin Slider အကြောင်းကို ပြောပြခဲ့ပြီးပါပြီ။ ဒီတစ်ခေါက်တော့ တစ်ဆင့်တက်ပြီး Slide.js ကိုလေ့လာကြည့်ကြရအောင်။
Slide.js က Coin Slider နဲ့ဘာကွာသလဲဆိုတော့ သူက ဘာမှမပါဘူး။ မိမိနှစ်သက်သလို Slider ကိုပုံသွင်းလို့ရတယ်။ နှစ်သက်တဲ့ CSS ကိုရေးပြီးသုံးလို့ရတယ်။ ရေးလွယ်ပြင်လွယ်တယ်။ အရင်ဆုံး HTML5 Structure တစ်ခုလောက်ရေးကြရအောင်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slides, A Slideshow Plugin for jQuery</title>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
</head>
<body>
<div id="slides">
<div>
<div>
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</body>
</html>
ပြီးရင်တော့ ကျွန်တော်တို့ CSS တွေကို Internal ရေးလိုက်ကြရအောင်။ jQuery Files တွေချိတ်ထားဖို့မမေ့ပါနဲ့။
<style type="text/css" media="screen">
.slides_container { width:470px; display:none; }
.slides_container div { width:470px; height:170px; display:block; }
.pagination { list-style:none; margin:0; padding:0; }
.pagination .current a {color:red;}
</style>
ဆက်ပြီးတော့ Slider အလုပ်လုပ်အောင် Script နည်းနည်းရေးရပါမယ်။
<script>
$(function(){
$('#slides').slides({
preload: true,
generateNextPrev: true
});
});
</script>
လိုအပ်တဲ့ jQuery Files တွေကတော့ jQuery-min နဲ့ Slide.js ဖြစ်တာကြောင့် ဒေါင်းလုပ်လုပ်ဖို့လိုအပ်ပါလိမ့်မယ်။
Click Here to Download jQuery-1.6.2.min
Click Here to Download Slide.js
ပြီးရင်တော့ ကျွန်တော်တို့ရဲ့ CODE ကဒီပုံစံအတိုင်းဖြစ်နေပါလိမ့်မယ်။
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slides, A Slideshow Plugin for jQuery</title>
<style type="text/css" media="screen">
.slides_container { width:470px; display:none; }
.slides_container div { width:470px; height:170px; display:block; }
.pagination { list-style:none; margin:0; padding:0; }
.pagination .current a {color:red;}
</style>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
generateNextPrev: true
});
});
</script>
</head>
<body>
<div id="slides">
<div>
<div>
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</body>
</html>
Slide.js File ကို Download လုပ်ရမှာ တခြားလုပ်ထားတဲ့ Demo Files တွေပါပါဝင်ပါတယ်။ မိမိရေးသားတဲ့ CSS အပေါ်မူတည်ပြီးတော့ ကိုယ့်ရဲ့ Slider ပုံသဏ္ဍာန်ကလည်းပြောင်းလဲသွားမှာပါ။ HTML Template မှာ Slider ထည့်ချင်တဲ့သူတွေအတွက် Slide.js က အကောင်းဆုံးဖြစ်မယ်လို့ထင်ပါတယ်။ Easing Effects တွေနဲ့ တခြား JavaScript Functions တွေကိုတော့ Slidejs.com မှာသွားရောက်လေ့လာနိုင်ပါတယ်။ ကျွန်တော်တွေ့ဖူးတဲ့ Slider ထဲမှာတော့ အကောင်းဆုံးနဲ့ အရိုးရှင်းဆုံး Slider ပါပဲ။
Facebook comments:
One Response
Leave a comment
About the Author
Ads
Click Here to Download Slide.js
slide.js.zip file is occur Diagnostic message.
Pls, Colud you check it.