Framework jQuery Slideshow Otomatis dengan Item Navigasi Angka

HTML

<div id="slider">
    <div class="container">
        <div class="slide"> ... </div>
        <div class="slide"> ... </div>
        <div class="slide"> ... </div>
        <div class="slide"> ... </div>
        <div class="slide"> ... </div>
    </div>
</div>
<nav id="slider-nav"></nav>

CSS

/* Slider */
#slider {
  width:300px; /* dimensi lebar */
  height:200px;; /* dimensi tinggi */
  margin:0 auto;
  background-color:black;
  overflow:hidden; /* Sembunyikan muatan elemen '.container' yang berlebih dari '#slider' */
}

#slider .slide {
  width:300px; /* dimensi lebar */
  height:200px; /* dimensi tinggi */
  float:left;
}

#slide-1 {background-color:darkred}
#slide-2 {background-color:darkgreen}
#slide-3 {background-color:darkblue}
#slide-4 {background-color:gold}
#slide-5 {background-color:darkviolet}

/* Navigasi */
#slider-nav {
  display:block;
  width:300px;
  margin:10px auto;
  text-align:center;
}

#slider-nav a {
  display:inline-block;
  width:15px;
  height:15px;
  background-color:#bbb;
  font-size:0;
  color:transparent;
  overflow:hidden;
  text-indent:-99px;
  margin:0 2px 0 0;
  border:2px solid white;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
}

#slider-nav .active {
  background-color:green;
}

jQuery

(function($) {

    // Tangkap semua objek yang dibutuhkan
    var $slider = $('#slider'),
        $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;

    // Set posisi '.container' sebagai 'relative' (untuk kebutuhan animasi properti 'left')
    // Set lebar '.container' dengan ukuran = (lebar slideshow * jumlah slide)
    // Set tinggi '.container' dengan ukuran = tinggi slideshow
    $container.css({
        'position':'relative',
        'width':s_wide,
        'height':s_height
    });

    // Otomatis menyisipkan item navigasi berdasarkan jumlah slide
    $slide.each(function(index) {
        var i = index + 1;
        $nav.append('<a href="#slide-'+i+'">'+i+'</a>');
        $(this).attr('id', 'slide-'+i);
    });

    // Klik untuk mengganti slide
    $nav.find('a').on("click", function(pos) {
        // Tambah/lepas kelas 'active' dari item navigasi (untuk pewarnaan item navigasi yang aktif)
        $nav.find('.active').removeClass('active');
        $(this).addClass('active');
        pos = $(this).index() * $slider.width(); // Jarak animasi dihitung berdasarkan indeks navigasi yang diklik * lebar slider
        $container.animate({left:'-'+pos+'px'}, 600);
        clearInterval(autoSlide); // Bersihkan interval slideshow otomatis...
        autoSlide = setInterval(slideShow, 3000); // Kemudian set kembali interval seperti semula.
        return false;
    }).first().addClass('active');

    // Untuk keperluan event klik otomatis pada navigasi
    function slideShow() {
        if ($nav.find('.active').next().length) {
            $nav.find('.active').next().trigger("click");
        } else {
            $nav.find('a').first().trigger("click");
        }
    } autoSlide = setInterval(slideShow, 3000); // Jalankan fungsi slideShow() dengan interval 3 detik!

})(jQuery);

Lihat Demo Salinan di JSFiddle

---

Penjelasan Singkat

Kotak Slider

Mendefinisikan ukuran tinggi dan lebar adalah bagian terpenting, karena slideshow ini menggunakan animasi slide (bergerak menyamping dengan jarak tertentu) yang jaraknya ditentukan oleh lebar slideshow:

#slider {
  width:300px; /* lebar slider */
  height:200px;; /* tinggi slider */
  overflow:hidden;
}

#slider .slide {
  width:300px; /* lebar item sama dengan lebar kontainer */
  height:200px; /* tinggi item sama dengan lebar kontainer */
  float:left;
}

Setelah dimensi ditentukan, selanjutnya adalah menyimpan semua data objek dan ukuran yang diperlukan. Diantaranya:

var $slider = $('#slider'), // Slideshow => '#slider'
    $container = $slider.find('.container'), // Kontainer item slider => '.container'
    $nav = $('#slider-nav'), // Navigasi slider => '#slider-nav'
    $slide = $container.children(), // Item slider => '.slide'
    s_length = $slide.length, // Jumlah item slider
    s_wide = $slider.width() * s_length, // (lebar slider * jumlah slide) => digunakan untuk menentukan total ukuran lebar kontainer item slider
    s_height = $slider.height(), // Tinggi slider
    autoSlide = null; // Variabel kosong

Set ukuran kontainer item slider sesuai ukuran yang telah diperhitungkan di atas:

// Set posisi '.container' sebagai 'relative' (untuk kebutuhan animasi properti 'left')
// Set lebar '.container' dengan ukuran s_wide
// Set tinggi '.container' dengan ukuran s_height
$container.css({
    'position':'relative',
    'width':s_wide,
    'height':s_height
});

Navigasi

Anda bisa saja menyisipkan setiap item navigasi secara manual dengan jumlah yang sama berdasarkan jumlah item slider. Tapi Saya lebih menyarankan untuk menggunakan cara otomatis, dengan jQuery .each()

$slide.each(function(index) {
    var i = index + 1;
    $nav.append('<a href="#slide-'+i+'">'+i+'</a>');
    $(this).attr('id', 'slide-'+i);
});

Eksekutor

Fungsi tugas dibuat setelah navigasi terbentuk, yaitu fungsi yang akan menganimasikan elemen .container ke arah kiri dengan jarak tertentu saat sebuah item navigasi diklik:

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

    // Tambah/lepas kelas 'active' dari item navigasi (untuk pewarnaan item navigasi yang aktif)
    $nav.find('.active').removeClass('active');
    $(this).addClass('active');

    pos = $(this).index() * $slider.width(); // Jarak animasi => Dihitung berdasarkan indeks navigasi yang diklik * lebar slider

    $container.animate({left:'-'+pos+'px'}, 600); // Animasikan '.container'

    clearInterval(autoSlide); // Bersihkan interval slideshow otomatis...

    autoSlide = setInterval(slideShow, 3000); // Kemudian set kembali interval seperti semula.

    return false;

}).first().addClass('active'); // Tambahkan kelas 'active' pada item navigasi pertama sebagai awalan

Ada dua hal yang belum dijelaskan pada kode di atas, yaitu clearInterval(slideShow) dan setInterval(slideShow, 3000). Bagian itu akan dibuat di bawah:

Utilitas Animasi Otomatis

Pertama, yang dibutuhkan adalah sebuah fungsi seperti ini:

function slideShow() {
    if ($nav.find('.active').next().length) {
       // Saat item navigasi '.active' ditemukan, dan terdapat item navigasi lain disampingnya...
       // seleksi item navigasi di sampingnya kemudian picu event .click() padanya!
        $nav.find('.active').next().trigger("click");
    } else {
        // Jika tidak ditemukan, seleksi item navigasi yang pertama kemudian picu event .click() padanya!
        $nav.find('a').first().trigger("click");
    }
}

Tugasnya adalah untuk mengecek keberadaan item navigasi yang aktif (yang memiliki kelas active). Saat item tersebut ditemukan, maka jQuery akan melihat kepada item di sampingnya kemudian akan memicu event .click(), sehingga fungsi $nav.find('a').on("click", doSomething) yang kita buat sebelumnya bisa bekerja melalui perantara ini. Tambahan lainnya, jika elemen setelah item navigasi tidak ditemukan, maka pindahkan selektor .next() menjadi .first() untuk kembali ke bagian awal, menyeleksi item navigasi pertama.

Terakhir, gunakan JavaScript setInterval() untuk menjalankan slideShow() secara otomatis berdasarkan interval tertentu. Di sini, Saya menggunakan interval selama 3 detik:

// Variabel autoSlide bisa kita gunakan mulai sekarang :)
autoSlide = setInterval(slideShow, 3000);

Selanjutnya: Tip-Tip Modifikasi