Tutorial Programming

Tutorial Membuat Slider Dengan Jquery Basic Slider

Hallo 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/* Slider */
*{
  margin :0;
  padding:0;
}
#tuts-slider{
  positionrelative;
  border:1px solid #ddd;
  height250px;
  width300px;
}
#tuts-slider .bjqs{
  positionabsolute;
  height250px;
  overflowhidden;
}
#tuts-slider ul{
  list-style-typenone;
}
#tuts-slider .bjqs li{
  border-top:none;
  padding:0;
  floatleft;
}
#tuts-slider .bjqs-controls {
  position:absolute;
  top:10px;
  left:-5px;
  border:1px solid #ddd;
}
#tuts-slider .bjqs-controls:before{
  content:"";
  width:4px;
  height:4px
  positionabsolute;
  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;
  displayblock;
  color:#000
  font:normal 12px arial;
}
#tuts-slider .bjqs-controls li a:hover{
  text-decorationnone;
  background:#efefef;
}
#tuts-slider img{
  height250pxwidth300pxfloatleftpositionrelative;
}
Selanjutnya tambahkan kode javascript berikut ini diatas

<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.
1
2
3
4
5
6
7
8
9
10
<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.
1
2
3
#tuts-slider img{
  height250pxwidth300pxfloatleftpositionrelative;
}
dan
1
2
'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...

No comments:

Post a Comment

Tutorial Programming Designed by Templateism | Ary EJFA Copyright © 2015

Theme images by richcano. Powered by Blogger.