Membuat Content Slider Dengan jQuery Cycle, Bag. 2

Pada bagian yang kedua ini saya akan membahas beberapa setting yang sering digunakan ketika kita membuat slideshow (content slider) dengan jQuery Cycle. Ada dua hal penting yang akan saya bahas di sini yaitu slideshow transition dan navigation control.

Saya anggap Anda sudah mengetahui apa itu content slider. Akan tetapi jika belum tahu, silakan Anda baca terlebih dahulu artikel saya yang pertama. Seperti biasanya saya akan mengawali setiap pembahasan dengan contoh kode lalu diikuti dengan penjelasannya.

Slideshow Transition

Yang dimaksud dengan slideshow transition yaitu proses terjadinya pergantian dari slide pertama menuju slide kedua dan seterusnya. Ada dua macam slideshow transition, 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.

Nah, agar proses transisi slideshow tersebut kelihatan menarik biasanya disisipkan efek tertentu. Ada beberapa efek yang bisa kita gunakan, 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

Berikut ini contoh kode untuk mengatur transisi slideshow:

1
2
3
4
5
6

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

Kode yang saya tulis di atas merupakan contoh Automatic Slideshow. Ini ditandai dengan setting timeout: 2000. Maksud dari setting tersebut yaitu proses transisi dari slide pertama menuju kedua dan 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 digunakan untuk mengatur cepat lambatnya transisi slideshow. Opsi pause dipakai 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 biasanya dipakai yaitu 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

1
2
3
4
5
6
7

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

Transisi manual terjadi jika kita mengklik slideshow.

Contoh 2: Navigasi berupa angka (urutan slideshow)

1
2
3
4
5
6
7
8

$('#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 stylesheet seperti contoh di bawah ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#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

1
2
3
4
5
6
7
8
9
10
11

$('#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>';
      }
});

Anda bisa mendownload semua source code di atas dengan mengklik link berikut ini.

(bersambung)