Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Framework jQuery Slideshow Otomatis dengan Item Navigasi Angka

Simple Useful jQuery Slideshow

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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 26 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!