Beranda » » Kode Script Demo Slider Sederhana

Kode Script Demo Slider Sederhana


demo1 demo1 demo1 demo1


Script Kode Slider Diatas

HTML


<div id="prikitiw-slider">
<div style="left: -259px;" class="konten-slider">
<img src="http://4.bp.blogspot.com/-hLJVp4gh2m8/Tpfhe3IjlkI/AAAAAAAAA_Y/j1Z9wLICLpc/s1600/images1.jpeg" alt="demo1">
<img src="http://4.bp.blogspot.com/-hLJVp4gh2m8/Tpfhe3IjlkI/AAAAAAAAA_Y/j1Z9wLICLpc/s1600/images1.jpeg" alt="demo1">
<img src="http://4.bp.blogspot.com/-hLJVp4gh2m8/Tpfhe3IjlkI/AAAAAAAAA_Y/j1Z9wLICLpc/s1600/images1.jpeg" alt="demo1">
<img src="http://4.bp.blogspot.com/-hLJVp4gh2m8/Tpfhe3IjlkI/AAAAAAAAA_Y/j1Z9wLICLpc/s1600/images1.jpeg" alt="demo1">
<div style="clear:both;">
</div></div></div>
<div class="jqwrapper">
<button id="left">kiri</button>
<button id="right">kanan</button>
</div>


CSS


.jqwrapper{
position:relative;
top:-190px;
text-align:center;
width:259px;
}

#prikitiw-slider{
background:black;
border:2px solid #fff;
box-shadow:0 0 3px #000;
-webkit-box-shadow:0 0 3px #000;
-moz-box-shadow:0 0 3px #000;
width:259px; height:194;
overflow:hidden;
}

#prikitiw-slider img{
float:left; border:none;
}

#prikitiw-slider .konten-slider {
position:relative;
width:1036px; left:-259px;
}


Deklarasi JQuery


$(document).ready(function() { $("#right").click(function(){
$(".konten-slider").animate({"left": "-=259px"}, 600);});
$("#left").click(function(){$(".konten-slider").animate({"left": "+=259px"}, 600);});});

Thank's ALL

Penulis: Unknown Lokasi: Condongcatur, Jalan Kaliurang km7, Yogyakarta

Artikel Kode Script Demo Slider Sederhana, diterbitkan oleh Unknown pada hari . Semoga artikel ini dapat menambah wawasan Anda. Unknown adalah seorang BLOGGER pemula yang sedang belajar secara otodidak seputar Blogging melalui berbagai blog/web, yang ingin berbagi juga dengan SOBAT BLOGGER lainnya di seluruh NUSANTARA.