Membuat Slideshow plus Navigasi dengan jQuery

Buatlah blog Anda lebih cantik dengan menambahkan slideshow. Selain cantik, slideshow juga menghemat tempat karena kita bisa menampilkan beberapa item pada satu tempat. Ingin mencoba silahkan.

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:#F5B800}
#slide-2 {background-color:#9999FF}
#slide-3 {background-color:#FFCC99}
#slide-4 {background-color:#AFCAAF}
#slide-5 {background-color:#9F8BB1}

/* 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($) {

    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;

    $container.css({
        'position':'relative',
        'width':s_wide,
        'height':s_height
    });

    $slide.each(function(index) {
        var i = index + 1;
        $nav.append('<a href="#slide-'+i+'">'+i+'</a>');
        $(this).attr('id', 'slide-'+i);
    });

    $nav.find('a').on("click", function(pos) {
        $nav.find('.active').removeClass('active');
        $(this).addClass('active');
        pos = $(this).index() * $slider.width();
        $container.animate({left:'-'+pos+'px'}, 600);
        clearInterval(autoSlide);
        autoSlide = setInterval(slideShow, 3000);
        return false;
    }).first().addClass('active');

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

})(jQuery);


Selamat mencoba :)

Komentar

  1. demonya error
    download template Download Template Jelasinblog Blue Jeans LINK DOWNLOAD OVER BANYAKAN YANG DONLOD JADI GA BISA DIDONLOAD :(

    BalasHapus
  2. scrip jquery dimmana kah harus meletakkannya

    BalasHapus
  3. Hi Dear ,
    I See Your Blog Daily..Your Blog Is Very Usefull For Me .I Like SO Much


    You Can Also See..

    Slider Maker is the easiest tool to generate jQuery Photo Slideshows - Upload jquery slideshow maker on your web server and start building your first web slideshows.

    Visit Now - http://www.slider-maker.com/

    BalasHapus
  4. bang bisa buat tombol prev next di slider ? tapi hanya muncul saat ada kursor aja

    BalasHapus
  5. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template