Cara Membuat Slideshow modifikasi dengan JQuery

1. Slideshow dengan Caption

Untuk membuat slideshow dengan caption, kita memerlukan beberapa langkah perubahan. Pertama-tama, kita ganti elemen <div class="slide"> dengan <img>. Kemudian sisipkan elemen <figcaption> ke dalam #slider. Bagian inilah yang nantinya akan diisi oleh teks dari setiap item slider:

<figure id="slider">
    <div class="container">
        <img src="img/slide-1.jpg" alt="Deskripsi gambar 1">
        <img src="img/slide-2.jpg" alt="Deskripsi gambar 2">
        <img src="img/slide-3.jpg" alt="Deskripsi gambar 3">
        <img src="img/slide-4.jpg" alt="Deskripsi gambar 4">
    </div>
    <figcaption></figcaption>
</figure>
<nav id="slider-nav"></nav>

Supaya lebih semantik, Saya juga telah mengganti elemen #slider yang tadinya adalah elemen divisi menjadi elemen figur. Lihat kode di atas!

CSS

Setelah itu kita set beberapa perubahan pada kode CSS:

/* Slider */
#slider {
  display:block;
  position:relative;
}

/* Untuk caption */
#slider figcaption {
  display:block;
  background-color:black;
  font:normal normal 11px Arial,Sans-Serif;
  color:white;
  opacity:.8;
  padding:10px 15px;
  position:absolute;
  right:0;
  bottom:-100px; /* sembunyikan dengan cara ini :) */
  left:0;
  z-index:4;
}

#slider img {
  display:block;
  margin:0 0;
  width:300px; /* dimensi lebar */
  height:200px; /* dimensi tinggi */
  float:left;
}

JQuery

Tangkap satu objek lagi dan simpan ke dalam variabel $caption, yaitu elemen <figcaption>:

$caption = $slider.find('figcaption');

Setelah itu, kita harus mengubah logika animasi slideshow, karena di sini kita baru saja menambahkan elemen caption. Langkah animasinya seperti ini:

Pertama-tama, tampilkan teks slide awal ke dalam elemen <figcaption> sebagai awalan (dalam kasus ini Saya mengambil teks tersebut dari atribut alt pada masing-masing gambar). Ke dua adalah langkah animasi. Urutannya:

1. Sembunyikan caption
2. Geser slider
3. Ganti teks caption dengan deskripsi yang baru, kemudian tampilkan caption.

Semuanya akan menjadi seperti ini:

$nav.find('a').on("click", function() {
    $nav.find('.active').removeClass('active');
    $(this).addClass('active');
    var pos = $(this).index() * $slider.width(),

        text = $slide.eq($(this).index()).attr('alt'); // Mengambil teks dari atribut alt pada gambar ke-`$(this).index()`

    // (1) Menyembunyikan caption...
    $caption.stop().animate({bottom:'-100px'}, 400);

    // (2) Menggeser slider...
    $container.stop().animate({left:'-'+pos+'px'}, 600, function() {

        // (3) Mengganti teks caption dengan deskripsi yang baru...
        // kemudian tampilkan caption dengan efek animasi properti 'bottom'
        $caption.html(text).stop().animate({bottom:'0'}, 400);

    });
    clearInterval(autoSlide);
    autoSlide = setInterval(slideShow, 3000);
    return false;
}).first().addClass('active');

// Sebagai awalan => tampilkan caption dengan deskripsi atribut alt dari slide pertama
$caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, 600);

Lainnya

Slideshow berupa gambar membutuhkan waktu lebih lama untuk memuat. Dan saat proses pemuatan terjadi, biasanya kita akan melihat efek yang tidak bagus dari gambar yang terpotong-potong. Cara termudah untuk mengatasi itu adalah dengan menyembunyikan semua gambar terlebih dahulu sebelum termuat. Hingga saat gambar sudah termuat, kita bisa menampilkannya:

/**
 * Tip yang baik untuk slideshow berupa gambar:
 * Sembunyikan tampilan sampai semua gambar benar-benar termuat...
 * ... agar saat gambar sedang dimuat, dia tidak merusak pemandangan kita :)
 */

#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}

$(window).on("load", function() {

    // Tampilkan '.container', 'figcaption' dan '#slide-nav' saat halaman (semua gambar) telah termuat!
    $container.show();
    $caption.show();
    $nav.css('opacity',1);

    // Kemudian jalankan interval slideshow...
    autoSlide = setInterval(slideShow, 3000);

});

Sementara gambar sedang memuat, kita tampilkan efek animasi loading dengan menambahkan latar berupa loading.gifagar slideshow menjadi lebih menarik dan komunikatif:

#slider {
  background:white url('img/loading.gif') no-repeat 50% 50%;
}

Lihat Demo

2. Efek Fade

CSS

Pembuatan efek fade bisa dilakukan dengan perhitungan yang lebih sederhana:

Konsep dasar slideshow dengan efek fade adalah: Semua gambar bertumpuk, dan masing-masing gambar bergantian menampilkan diri dengan efek peningkatan/penurunan pemudaran.

Sehingga, kode CSS yang perlu kita ubah hanya ada pada bagian ini:

#slider img {
  display:block;
  margin:0 0;
  width:300px;
  height:200px;
  /* Gunakan posisi absolut untuk menumpuk masing-masing slide satu sama lain */
  position:absolute;
  top:0;
  left:0;
}

JQuery

Setelah itu, ada beberapa bagian variabel yang bisa kita buang. Kita sudah tidak perlu lagi menggunakan variabel-variabel ini, karena semua slide kini berada dalam satu tumpukan!

var $slider = $('#slider'),
    $caption = $slider.find('figcaption'),
    $container = $slider.find('.container'),
    $nav = $('#slider-nav'),
    $slide = $container.children(),
    s_length = $slide.length,
    s_wide = $slider.width() * s_length,
    s_height = $slider.height(),
    autoSlide = null;

Efek animasi bisa dibuat dengan JQuery .fadeIn() dan .fadeOut(). Seperti ini:

$nav.find('a').on("click", function() {

    $nav.find('.active').removeClass('active');
    $(this).addClass('active');

    var pos = $(this).index() * $slider.width(),
        text = $slide.eq($(this).index()).attr('alt');
    $caption.stop().animate({bottom:'-100px'}, 400);

    // Sembunyikan semua slide dengan efek .fadeOut() ...
    // ... kemudian tampilkan slide ke-`$(this).index()` dengan efek .fadeIn()
    $slide.fadeOut(600).eq($(this).index()).fadeIn(600, function() {
        $caption.html(text).stop().animate({bottom:'0'}, 400);
    });

    clearInterval(autoSlide);
    autoSlide = setInterval(slideShow, 3000);

    return false;

}).first().addClass('active');

Lainnya

Jangan lupa untuk menghilangkan latar animasi loading saat semua gambar sudah termuat:

$(window).on("load", function() {
    $slider.css('background-image','none');
});

Lihat Demo