Penjelasan Slideshow Otomatis JQUERY dengan Item Navigasi Angka

Penjelasan Slideshow Otomatis JQUERY dengan Item Navigasi Angka, pengertian lebih lengkap dari artikel sebelumnya berjudul Slideshow Otomatis JQUERY dengan Item Navigasi Angka, untuk lebih jelasnya artikel dibawah ini akan menjelaskannya secara sabar  ^_^

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

Cukup sekian ujung artikel sayafafan kali ini tentang Penjelasan Slideshow Otomatis JQUERY dengan Item Navigasi Angka