Framework JQuery Slideshow Otomatis dengan Item Navigasi Angka

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

JavaScript

(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 + 2;
        $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...