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...

membuat slider dengan jquery basic slider

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


About Author

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 :).


Comment & Discussions

  • Hello World

  • venida (Guest)
    Adakah tutorial membuat website travel seperti traveloka dan tiket.com? atau punya referensi lain? programmer atau developer? mohon di share infonya jika ada melalui email saya. Saya butuh untuk website travel saya.

    Terima kasih sebelumnya
    Salam

  • firman jati
    Buat mbak Venida apakah masih membutuhkan website travel spt traveloka ? saya bisa membantu

    Terima Kasih..

  • Please LOGIN before if you want to give the comment.