membuat slider dengan jquery basic slider

Oleh: ricky orlando napitupulu

Salam Jaco :) kali ini saya timbul lagi untuk menunjukkan tutorial untuk
membuat image slider pada website dengan menggunakan jquery basic
slider. Fiturnya yang disediakan : Auto Play Tombol Next / Prev lebar /
tinggi mudah dimodifikasi Menggunakan efek geser ketika gambar
berganti Image slider yang dibuat kali ini sangat mudah di konfigurasi,
khususnya pada ukuran gambar nya, sehingg...

Salam Jaco :) kali ini saya timbul lagi untuk menunjukkan tutorial untuk membuat image slider pada
website dengan menggunakan jquery basic slider.
Fiturnya yang disediakan :

Auto Play
Tombol Next / Prev
lebar / tinggi mudah dimodifikasi
Menggunakan efek geser ketika gambar berganti

Image slider yang dibuat kali ini sangat mudah di konfigurasi, khususnya pada ukuran gambar nya,
sehingga image slider ini sangat fleksibel dalam penempatanya, bisa dibuat di header, sidebar,
atopun dimana aja. Kita hanya perlu setting ukuran nya saja.
Pertama download dahulu file yang diperlukan yaitu jquery.js dan basic-jquery-slider.js atau kamu
bisa mendownload nya disini.
Setelah didownload embed kedua library tersebut, ingat dahulukan untuk memasukkan jquery.js
terlebih dahulu.
Setelah itu tambahkan style css berikut ini ke dokumen anda.
/* Slider */
*{
margin :0;
padding:0;
}
#tuts-slider{
position: relative;
border:1px solid #ddd;
height: 250px;
width: 300px;
}
#tuts-slider .bjqs{
position: absolute;

height: 250px;
overflow: hidden;
}
#tuts-slider ul{
list-style-type: none;
}
#tuts-slider .bjqs li{
border-top:none;
padding:0;
float: left;
}
#tuts-slider .bjqs-controls {
position:absolute;
top:10px;
left:-5px;
border:1px solid #ddd;
}
#tuts-slider .bjqs-controls:before{
content:"";
width:4px;
height:4px;
position: absolute;
bottom:-5px;
left:0;
}
#tuts-slider .bjqs-controls li{
border-top:none;
padding:0;
}
#tuts-slider .bjqs-controls li:first-child{
border-bottom:1px solid #ddd;
}
#tuts-slider .bjqs-controls li a{
padding:5px;
text-decoration:none;
background:white;
display: block;
color:#000;
font:normal 12px arial;
}
#tuts-slider .bjqs-controls li a:hover{
text-decoration: none;
background:#efefef;
}
#tuts-slider img{
height: 250px; width: 300px; float: left; position: relative;
}
Selanjutnya tambahkan kode javascript berikut ini diatas </body>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#tuts-slider').bjqs({
'animation' : 'slide',
'width' : 900,
'height' : 250,
'showMarkers' :false,
nextText: '<i class="icon-chevron-right">next</i>',
prevText: '<i class="icon-chevron-left">prev</i>',
});
});
</script>
Dan terakhir tambahkan kode html dibawah ini.
<div id="tuts-slider">
<ul class="bjqs">
<li class="bjqs-slide clone">
<a href="#" target="_blank"><img src="gambar.jpg" alt=""></a></li>
<li class="bjqs-slide clone">
<a href="#" target="_blank"><img src="gambar.jpg" alt=""></a></li>
<li class="bjqs-slide clone">
<a href="#" target="_blank"><img src="gambar.jpg" alt=""></a></li>
</ul>
</div>
Untuk mengkostumisasi ukuran, ganti nilai atribut width dan height nya pada kode css dan
javascript.
#tuts-slider img{
height: 250px; width: 300px; float: left; position: relative;
}
dan
'width' : 300,
'height' : 250,
Seperti contoh diatas, saya membuat ukurannya menjadi 300 px, akan sangat cocok diletakkan di
bagian sidebar website, nah kalo diganti menjadi 900 atau lebih cocok diletakkan dibagian header
website nya.
Mudah bukan :D . Sampai disini dulu ya, See you...
Download Demo

Tentang Penulis
ricky orlando napitupulu
Nothing special :) Saya seorang lelaki, mahasiswa, blogger, cinta musik
dan juga sedang mencoba ilmu desain grafis. Tidak banyak pengetahuan
yang bisa saya bagikan, Namun saya akan sangat senang membagikan
pengetahuan tersebut bila dibutuhkan :).