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>
<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;
}
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);});});
$(".konten-slider").animate({"left": "-=259px"}, 600);});
$("#left").click(function(){$(".konten-slider").animate({"left": "+=259px"}, 600);});});
Thank's ALL
Artikel