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 menurut 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 menurut 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 menyerupai 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);Penjelasan Singkat
Kotak Slider
Mendefinisikan ukuran tinggi dan lebar ialah pecahan terpenting, sebab slideshow ini memakai 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 ialah 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) => dipakai untuk memilih total ukuran lebar kontainer item slider s_height = $slider.height(), // Tinggi slider autoSlide = null; // Variabel kosongSet 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 sanggup saja menyisipkan setiap item navigasi secara manual dengan jumlah yang sama menurut jumlah item slider. Tapi Saya lebih menyarankan untuk memakai 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 kiprah dibentuk sehabis navigasi terbentuk, yaitu fungsi yang akan menganimasikan elemen .container ke arah kiri dengan jarak tertentu ketika 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 menurut 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 menyerupai semula. return false; }).first().addClass('active'); // Tambahkan kelas 'active' pada item navigasi pertama sebagai awalanAda dua hal yang belum dijelaskan pada instruksi di atas, yaitu clearInterval(slideShow) dan setInterval(slideShow, 3000). Bagian itu akan dibentuk di bawah:
Utilitas Animasi Otomatis
Pertama, yang dibutuhkan ialah sebuah fungsi menyerupai 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 ialah untuk mengecek keberadaan item navigasi yang aktif (yang mempunyai 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 sanggup bekerja melalui mediator ini. Tambahan lainnya, bila elemen sehabis item navigasi tidak ditemukan, maka pindahkan selektor .next() menjadi .first() untuk kembali ke pecahan awal, menyeleksi item navigasi pertama.
Terakhir, gunakan JavaScript setInterval() untuk menjalankan slideShow() secara otomatis menurut interval tertentu. Di sini, Saya memakai interval selama 3 detik:
// Variabel autoSlide sanggup kita gunakan mulai kini :) autoSlide = setInterval(slideShow, 3000);