Skip to content
You are here: Home » Tutorial » JavaScript » Membuat Content Slider dengan jQuery Cycle, Bag. 1

Membuat Content Slider dengan jQuery Cycle, Bag. 1

Oleh: Wahyu Wibowo |
October 17th, 2011 |
1 Comment »

Content Slider merupakan salah satu cara yang populer untuk menampilkan daftar artikel yang dianggap menarik dalam bentuk slideshow. Sekilas tampilannya mirip dengan Flash, namun sebenarnya ini hanyalah permainan JavaScript saja.

Ada banyak sekali plugin jQuery yang bisa kita pakai untuk membuat Content Slider, misalnya saja jQuery Coda Slider, jQuery Cycle, AnythingSlider, jCarousel, Easy Slider dan masih banyak lagi yang lainnya.

Nah, pada artikel ini saya hanya akan membahas salah satu saja yaitu jQuery Cycle. Sebelumnya Anda harus mendownload library dan plugin di bawah ini:

1. Kode HTML

Pertama, kita buat kode HTML untuk menampilkan konten yang akan kita buat slideshow. Untuk bagian pertama ini, kita akan membuat slideshow yang akan menampilkan gambar secara bergantian.

Berikut ini kode HTML yang kita butuhkan.

1
2
3
4
5

<div id="content-slider">
   <img src="img_1.jpg" alt="Slideshow 1" />
   <img src="img_2.jpg" alt="Slideshow 2" />
   <img src="img_3.jpg" alt="Slideshow 3" />
</div>

Jumlah image yang akan kita buat slideshow bebas, untuk contoh ini saya hanya menggunakan tiga buah gambar. Sisipkan kode HTML di atas pada bagian tag BODY.

2. Kode CSS

Langkah selanjutnya kita tambahkan beberapa stylesheet untuk mengatur tampilan slideshow tersebut.

1
2
3
4
5
6
7
8
9
10
11
12

#content-slider {
   position: relative;
   width: 400px;
   height: 300px;
   overflow: hidden;
}
 
#content-slider img {
   display: block;
   width: 400px;
   height: 300px;
}

Loading library jQuery dan Cycle Plugin biasanya agak lama, jadi kita buat tampilan slideshow tersebut dengan ukuran width dan height yang fixed agar tampilan awalnya tidak berantakan. Hal ini cukup penting mengingat eksekusi kode jQuery Cycle tersebut dilakukan setelah loading HTML selesai.

Atribut overflow: hidden kita pakai untuk menyembunyikan tampilan semua gambar kecuali gambar yang pertama, sebelum kode jQuery dieksekusi.

3. Kode jQuery

Sisipkan library jQuery dan Cycle Plugin di bagian tag HEAD seperti kode berikut ini.

1
2

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.latest.js"></script>

Langkah selanjutnya, tambahkan kode seperti di bawah ini untuk memanggil fungsi pada jQuery Cycle Plugin.

1
2
3
4
5

$(document).ready(function() {
   $('#content-slider').cycle({
      fx: 'fade'
   });
});

Kode yang saya buat di atas merupakan pemanggilan fungsi yang paling sederhana. Pada contoh ini saya menggunakan efek fade untuk pergantian slide. Efek lainnya yang bisa Anda coba misalnya scrollUp, zoom dan shuffle. Efek selengkapnya bisa Anda lihat di sini.

Berikut ini kode lengkap dari yang saya terangkan di atas.

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

<html>
<head>
<title>Slideshow dengan jQuery Cycle Plugin</title>
<style type="text/css">
#content-slider {
   position: relative;
   width: 400px;
   height: 300px;
   overflow: hidden;
}
#content-slider img {
   display: block;
   width: 400px;
   height: 300px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#content-slider').cycle({
      fx: 'fade'
   });
});
</script>
</head>
<body>
<div id="content-slider">
   <img src="img_1.jpg" alt="Slideshow 1" />
   <img src="img_2.jpg" alt="Slideshow 2" />
   <img src="img_3.jpg" alt="Slideshow 3" />
</div>
</body>
</html>

Bersambung

Tulisan Terkait:

Bagaimana Komentar Anda?

Monggo kalau Anda mau mengomentari tulisan di atas! Bertanya atau mengkritik juga boleh, tapi jangan terlalu menyakitkan :).

  • beoding | October 19th, 2011 jam 10:58 am

    wah penting banget nih gan..ane sedang belajar buat content slider pake Jquery..Jquery emang oke dan menarik

Tinggalkan Pesan