Beberapa Contoh Modifikasi Slideshow jQuery

Tabel Konten
  1. 1. Slideshow dengan Caption 
    1. HTML 
    2. CSS 
    3. jQuery 
    4. Lainnya 
  2. 2. Efek Fade 
    1. CSS 
    2. jQuery 
    3. Lainnya 
Beberapa Contoh Modifikasi Slideshow jQuery

Artikel ini merupakan kelanjutan dari artikel jQuery Slideshow Otomatis dengan Navigasi Angka

1. Slideshow dengan Caption 

HTML 

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/normal 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;
  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.gif agar 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;
  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

17 Komentar

  • abang ichal

    wew sy bingung ttg jquery silder iniee.

  • Anonim

    Wah Bingung Gan,Cara Masang nya bagimana??

    • Taufik Nurrohman

      Artikel di atas cuma digunakan sebagai bahan untuk menjelaskan cara kerja. Mengenai metode pemasangan bisa dipelajari melalui kode sumber pada halaman demo ⇒ CSS di atas </head>, HTML di dalam <body>, JavaScript di bawah HTML.

      • Andi AF Studio

        semakin mahir si penulis dibidang yang dia kuasai, maka apa yang disampaikannya dalam bidang tsb melalui tulisan juga akan berpengaruh :D
        reader yang mudah memahami maksud tulisannya, ya reader yang mahir juga :D

  • Surya Kusuma

    http://jsfiddle.net/surya31/5aRvF/2/embedded/result/

  • IMKBC

    Keren, ijin pakai :-bd

  • smartpulsa-88

    Melihat dari pertanyaan sobat; diaryonline.web.id saya sendiri masih bingung penempatannya,maklum masih pemula Gan...
    Kalo bisa sertakan cara penempatanya Gan secara komplit gitu.
    Salam Sukses and Matur Thangkyu...

  • Unknown

    thanks kawan... :-bd

  • Anonim

    wow mantap, thanks ilmunya

  • PAKAIAN.TOP

    komplit sudah :D tinggal slide ini, :yaya: yaaa.. untuk pengguna setia mesin blogspot

  • rudi

    Thank Mas...q mudeng sekaran...website q jadi jquerynya

  • Dwi

    mantabb

  • Agung Susanto

    (ASK) biat pas kursor di arahkan ke gambar, slider nya berhenti gimana ya?

    dan bikin slider sama di kasih progress bar mirip kayak di AutoBlog.com itu gimana ya? thanks banget kalo request saya di jawab :) :)

  • Ahwas

    sudah saya pasang diblog,tapi ko gambarnya tidak mau berganti,masalahnya dimana ya

  • Anonim

    Kalo untuk tampilan responsivenya gmna mas.. sudah saya coba tapi susah mas.. hehe.. mohon bantuannya..

Komentar telah ditutup.