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.

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

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

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Membuat Slideshow plus Navigasi dengan jQuery
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.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieehOP2rHE-cJyC9948QYN-wlk96UM2ax_NiT0D15cJKFnRU28VSkF-1XQgSycK9mMEovSO3Ya9QloHhyphenhyphennu5gJZ6bLOETCiGNVZTTHhCDammPGI_4DGuKTKMKf0W8UVfcGsBko4L1T0mQ/s1600/slideshow-blogger.PNG
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieehOP2rHE-cJyC9948QYN-wlk96UM2ax_NiT0D15cJKFnRU28VSkF-1XQgSycK9mMEovSO3Ya9QloHhyphenhyphennu5gJZ6bLOETCiGNVZTTHhCDammPGI_4DGuKTKMKf0W8UVfcGsBko4L1T0mQ/s72-c/slideshow-blogger.PNG
Jelas in Blog
https://jelasinblog.blogspot.com/2014/06/membuat-slideshow-plus-navigasi-dengan.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/06/membuat-slideshow-plus-navigasi-dengan.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content