Tutor Blog Mania: Membuat Content Slider dengan jQuery Cycle

Content Slider merupakan salah satu yang paling populer untuk menampilkan daftar artikel yang dianggap menarik dalam bentuk slideshow.

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

Kali ini lupakan dulu yang lain, mari kita membicrakan jQuery Cycle. Anda harus mendownload library dan pluginnya terlebih dahulu .

Kode HTML

Langkah awal, buat kode HTML untuk menampilkan konten yang akan di buat slideshow. Pada bagian ini, kita akan membuat slideshow yang akan menampilkan gambar secara bergantian.

Berikut ini kode HTMLnya .

<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 gambar sesuai keinginan , tercantum tiga gambar pada contoh di atas. Lalu sisipkan kode HTML di atas pada bagian tag BODY.
Code CSSSelanjutnya kita tambahkan beberapa CSS untuk mengatur tampilan slideshow tersebut.

#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 lumayan lama, jadi buat tampilan slideshow tersebut dengan ukuran width dan height yang fixed supaya tampilan awalnya tidak berantakan.

Kode jQuery

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

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

Selanjutnya, tambahkan kode seperti berikut untuk memanggil fungsi pada jQuery Cycle Plugin.

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

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

Berikut ini kode lengkapnya .

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

Slideshow Transition

slideshow transition yaitu proses terjadinya pergantian dari slide pertama menuju slide selanjutnya. Slideshow transition ada dua macam , yaitu otomatis dan manual. Automatic Slideshow merupakan default transisi pada jQuery Cycle dan diatur berdasarkan waktu tertentu. Sedangkan Manual Slideshow biasanya dikendalikan dengan tombol, misalnya Next dan Prev atau bisa juga dengan tanda panah.

Untuk menambah tingkat kemenarikan pada transisi slideshow biasanya disisipkan efek tertentu. Ada beberapa efek yang biasa digunakan, yaitu:

blindX
blindY
blindZ
cover
curtainX
curtainY
fade
fadeZoom
growX
growY
scrollUp
scrollDown
scrollLeft
scrollRight
scrollHorz
scrollVert
shuffle
slideX
slideY
toss
turnUp
turnDown
turnLeft
turnRight
uncover
wipe
zoom

Dan ini contoh kode untuk mengatur transisi slideshow:

$('#content-slider').cycle({
   fx: 'fade',
   speed: 3000, // millisecond
   timeout: 2000, // millisecond
   pause: 1
});

Kode di atas merupakan contoh Automatic Slideshow. Ditandai dengan adanya setting timeout: 2000. Maksud dari setting tersebut adalah sebagai proses transisi dari slide pertama menuju slide seterusnya akan dilakukan secara otomatis setelah 2000 millisecond. Kita bisa mengubah transisi tersebut menjadi manual dengan menambah navigasi kontrol dan mengatur setting timeout dengan nilai 0.

Opsi speed berguna untuk mengatur cepat lambatnya transisi slideshow. Opsi pause digunakan untuk menghentikan sementara slideshow ketika mouse berada di atas slide, nilainya yaitu 1 dan 0.

Navigation Control

Navigation Control digunakan untuk mengendalikan transisi slideshow secara manual. Ada beberapa tipe kontrol yang biasa digunakan antara lain tombol panah, ikon kecil, angka (urutan slideshow) atau image thumbnail.

Berikut ini beberapa cara untuk menampilkan tombol navigasi:

Contoh 1: Navigasi berupa slideshow itu sendiri

Transisi manual terjadi jika kita mengklik slideshow.

$('#content-slider').cycle({
   fx: 'fade',
   speed: 3000,
   timeout: 2000,
   pause: 1,
   next: '#content-slider',
});

Contoh 2: Navigasi berupa angka (urutan slideshow)

$('#content-slider')
   .before('<div id="nav">')
   .cycle({
      fx: 'fade',
      speed: 3000,
      timeout: 0,
      pager: '#nav'
});

Transisi manual akan terjadi ketika kita mengklik navigasi angka yang terletak di atas slideshow. Tampilan navigasi kontrol (pager) kita atur dengan CSS seperti contoh di bawah ini:

#nav {
   margin-bottom: 10px;
}
#nav a { 
   border: 1px solid #ccc; 
   background: #fc0; 
   text-decoration: none; 
   margin: 0 2px 5px 0; 
   padding: 3px 10px;  
}
#nav a.activeSlide { 
   background: #000; 
   color: #fff;
}
#nav a:focus { 
   outline: none; 
}

Contoh 3: Navigasi berupa image thumbnail

$('#content-slider')
   .before('<ul id="nav">')
   .cycle({
      fx: 'fade',
      speed: 3000,
      timeout: 0,
      pager: '#nav',
      pagerAnchorBuilder: function(idx, slide) {
         return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
      }
});

Tutor Blog Mania

Label

Rabu, 13 Juli 2016

Membuat Content Slider dengan jQuery Cycle

Tidak ada komentar:

Posting Komentar