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

Comments

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

    ReplyDelete
  2. scrip jquery dimmana kah harus meletakkannya

    ReplyDelete
  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/

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

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete

Post a Comment

Popular posts from this blog

Perbedaan JavaScript dan jQuery Beserta Contoh

Cara Menggunakan :before dan :after

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template