Simple & Useful JQuery Slideshow

Modifikasi dengan Latar Belakang Image

HTML

<div id="slider">     
    <div class="container">         
        <img src="http://1.bp.blogspot.com/-08jggnjM0kA/UFaL7ykofpI/AAAAAAAAAB0/gjkO-SxwC1o/s1600/cooltext766929498.gif" alt="Deskripsi gambar 1">
        <img src="http://1.bp.blogspot.com/-08jggnjM0kA/UFaL7ykofpI/AAAAAAAAAB0/gjkO-SxwC1o/s1600/cooltext766929498.gif" alt="Deskripsi gambar 2">
        <img src="http://1.bp.blogspot.com/-08jggnjM0kA/UFaL7ykofpI/AAAAAAAAAB0/gjkO-SxwC1o/s1600/cooltext766929498.gif" alt="Deskripsi gambar 3">
        <img src="http://1.bp.blogspot.com/-08jggnjM0kA/UFaL7ykofpI/AAAAAAAAAB0/gjkO-SxwC1o/s1600/cooltext766929498.gif" alt="Deskripsi gambar 4">
    </div> 
        <figcaption></figcaption>
</div> 
<nav id="slider-nav"></nav>

CSS

/* Slider */
#slider {
 display:block;
  position:relative;
    width:300px; /* dimensi lebar */
  height:200px;; /* dimensi tinggi */
  margin:0 auto;
  background-color:black;
  overflow:hidden; /* Sembunyikan muatan elemen '.container' yang berlebih dari '#slider' */
    background:#000000 url('http://2.bp.blogspot.com/-pMlJ6GgLhwo/UDwhoVU0GMI/AAAAAAAABCo/AF4sYrv2bDE/s1600/loading_animation.gif') no-repeat 50% 50%;
}


#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;
}
/* Untuk caption */
#slider figcaption {
  display:block;
  background-color:black;
  font:normal normal 11px Arial,Sans-Serif;
  color:white;
  opacity:.8;
  padding:10px 15px;
  position:absolute;
  right:0;
  bottom:-100px; /* sembunyikan dengan cara ini :) */
  left:0;
  z-index:4;
}

#slider img {
  display:block;
  margin:0 0;
  width:300px; /* dimensi lebar */
  height:200px; /* dimensi tinggi */
  float:left;
}

JavaScript

(function($) {

    // Tangkap semua objek yang dibutuhkan
    var $slider = $('#slider'),
        $caption = $slider.find('figcaption');
        $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() {
    $nav.find('.active').removeClass('active');
    $(this).addClass('active');
    var pos = $(this).index() * $slider.width(),

        text = $slide.eq($(this).index()).attr('alt'); // Mengambil teks dari atribut alt pada gambar ke-`$(this).index()`

    // (1) Menyembunyikan caption...
    $caption.stop().animate({bottom:'-100px'}, 400);

    // (2) Menggeser slider...
    $container.stop().animate({left:'-'+pos+'px'}, 600, function() {

        // (3) Mengganti teks caption dengan deskripsi yang baru...
        // kemudian tampilkan caption dengan efek animasi properti 'bottom'
        $caption.html(text).stop().animate({bottom:'0'}, 400);

    });
    clearInterval(autoSlide);
    autoSlide = setInterval(slideShow, 3000);
    return false;
}).first().addClass('active');

// Sebagai awalan => tampilkan caption dengan deskripsi atribut alt dari slide...