ဘေလာ့မွာ Slider တစ္ခုျပဳလုပ္ျခင္း (၅)

 မဂၤလာပါ  သည္နည္းပညာေလးကေတာ့ မိမိတို႕ဘေလာ့မွာ ကိုယ္ညႊန္ျခင္ အေရးၾကီး ပို႕စ္ေနရာေလးေတြကို စလုိက္တာ ပုံစံေလးနဲ႕ လွလွပပ  ညႊန္ျပလိုတဲ့နည္းလမ္းေလးျဖစ္ပါတယ္... သည္လို နည္းလမ္းေလးေတြကို ပုံစံအမ်ိဳးမ်ိဳးနဲ႕ တင္ျပေပးသြားမွာ ျဖစ္ပါတယ္ ေအာက္မွာ နည္းလမ္းနဲ႕လိုအပ္တဲ့ကုဒ္ေတြ ေပးထားပါတယ္... ေလ့လာျပီး ကလိလုိက္ေနာ္....လန္းးးတယ္..သူကေတာ့ အရင္ပို႕ ေတြလို သိပ္ထည့္ရတာ မရွဳပ္ဘူးးး ပိုျပီးွရင္းတယ္ေလ.... ပိုလြယ္တာေပါ့...ကစ္လုိက္ဗ်ာ

အဲေနရာမွာ ေအာက္ကကုဒ္ေတြ ကို ထည့္ေပးလိုက္ပါေနာ္....

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://24work.webs.com/24work-blogspot/featured-post/17-content-code/yourjavascript-56841175202.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">


*{

margin:0;

padding:0;

}

html{

height:100%;

}





a img{

border:0;

}

div.wrap{

width:540px;

margin:0 auto;

text-align:left;

}

div#top div#nav{

float:left;

clear:both;

width:540px;

height:52px;

margin:22px 0 0;

background:url url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2CCmgBEClNUK_Agaaxw2V8RssMOPCv6Ex0_vlg-V-GOm8c3AsVo7wJ2AA0Y1TaajNTWruyGIsPe7-G6Y8dKUnm-GRIRMCyFINrr6BRRcb_L5pq70X21wQIit8qQ1FFkNJM3o0NABUcRwf/s1600/navbgq.png) 0 0 no-repeat;

}

div#top div#nav ul{

float:left;

width:700px;

height:52px;

list-style-type:none;

}

div#nav ul li{

float:left;

height:52px;

}

div#nav ul li a{

border:0;

height:52px;

display:block;

line-height:52px;

text-indent:-9999px;

}

div#header{

margin:-1px 0 0;

}

div#video-header{

height:683px;

margin:-1px 0 0;

}



div#header div#slide-holder{

z-index:40;

width:540px;

height:299px;

position:absolute;

}

div#header div#slide-holder div#slide-runner{

top:9px;

left:9px;

width:540px;

height:278px;

overflow:hidden;

position:absolute;

}

div#header div#slide-holder img{

margin:0;

display:none;

position:absolute;

}

div#header div#slide-holder div#slide-controls{

left:0;

bottom:228px;

width:540px;

height:46px;

display:none;

position:absolute;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5GYtTj9EvF1T3g84zXH79S86o0Kc9r0lZ6ipxK-UvkQ1oUB7x0ILbX9Irba8lc2u9lBq96MikaTlO-zasD_f4YwZoD-AMXp1TuWlNus6_kb2eKmn873eehIdH5PmzbXy-bv9GUbasPhJE/s1600/slidebg.png) 0 0;

}

div#header div#slide-holder div#slide-controls p.text{

float:left;

color:#fff;

display:inline;

font-size:10px;

line-height:16px;

margin:15px 0 0 20px;

text-transform:uppercase;

}

div#header div#slide-holder div#slide-controls p#slide-nav{

float:right;

height:24px;

display:inline;

margin:11px 15px 0 0;

}

div#header div#slide-holder div#slide-controls p#slide-nav a{

float:left;

width:24px;

height:24px;

display:inline;

font-size:11px;

margin:0 5px 0 0;

line-height:24px;

font-weight:bold;

text-align:center;

text-decoration:none;

background-position:0 0;

background-repeat:no-repeat;

color:#fff;

}

div#header div#slide-holder div#slide-controls p#slide-nav a.on{

background-position:0 -24px;

}

div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs0HwxxDWL16dhBeSy-SNSpP4PTAo4nwN3KudYIT2eimA4VBtzPK2oFUJuJAlra-W18Jq6hA0qSn1B7ANEI8jBd6cTeLJ7sPItvRhJe_Q-6BU9qaAuR_ikBnvXqicoPvJlsRcjgwghmjTW/s1600/sildenav.png);}

div#nav ul li a{background:url(images/nav.png) no-repeat;}


</style>



<div style="float:left;">

<div id="header"><div class="wrap">
<div id="slide-holder">
<div id="slide-runner">

<a href="မိမိပို႕စ္လင့္ထည့္ပါ"><img id="slide-img-1" src="ပုံလင့္ထည့္ရန္" class="slide" alt="" /></a>

<a href="မိမိပို႕စ္လင့္ထည့္ပါ"><img id="slide-img-2" src="ပုံလင့္ထည့္ရန္" class="slide" alt="" /></a>

<a href="မိမိပို႕စ္လင့္ထည့္ပါ"><img id="slide-img-3" src="ပုံလင့္ထည့္ရန္" class="slide" alt="Your image title here" /></a>

<a href="မိမိပို႕စ္လင့္ထည့္ပါ"><img id="slide-img-4" src="ပုံလင့္ထည့္ရန္" class="slide" alt="" /></a>

<a href="မိမိပို႕စ္လင့္ထည့္ပါ"><img id="slide-img-5" src="ပုံလင့္ထည့္ရန္" class="slide" alt="" /></a>

<a href="မိမိပို႕စ္လင့္ထည့္ပါ"><img id="slide-img-6" src="ပုံလင့္ထည့္ရန္" class="slide" alt="" /></a>




<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>

<!--content featured gallery here -->
</div>
<script type="text/javascript">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
</script></div></div></div>