Framework jQuery Slideshow Otomatis dengan Item Navigasi Angka

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 
  • Penjelasan Singkat 
    1. Kotak Slider 
    2. Navigasi 
    3. Eksekutor 
    4. Utilitas Animasi Otomatis 
  • Simple Useful jQuery Slideshow

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

    jQuery 

    (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 + 1;
            $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 detik!
    
    })(jQuery);

    Lihat Demo Salinan di JSFiddle


    Penjelasan Singkat 

    Kotak Slider 

    Mendefinisikan ukuran tinggi dan lebar adalah bagian terpenting, karena slideshow ini menggunakan animasi slide (bergerak menyamping dengan jarak tertentu) yang jaraknya ditentukan oleh lebar slideshow:

    #slider {
      width:300px; /* lebar slider */
      height:200px;; /* tinggi slider */
      overflow:hidden;
    }
    
    #slider .slide {
      width:300px; /* lebar item sama dengan lebar kontainer */
      height:200px; /* tinggi item sama dengan lebar kontainer */
      float:left;
    }

    Setelah dimensi ditentukan, selanjutnya adalah menyimpan semua data objek dan ukuran yang diperlukan. Diantaranya:

    var $slider = $('#slider'), // Slideshow => '#slider'
        $container = $slider.find('.container'), // Kontainer item slider => '.container'
        $nav = $('#slider-nav'), // Navigasi slider => '#slider-nav'
        $slide = $container.children(), // Item slider => '.slide'
        s_length = $slide.length, // Jumlah item slider
        s_wide = $slider.width() * s_length, // (lebar slider * jumlah slide) => digunakan untuk menentukan total ukuran lebar kontainer item slider
        s_height = $slider.height(), // Tinggi slider
        autoSlide = null; // Variabel kosong

    Set ukuran kontainer item slider sesuai ukuran yang telah diperhitungkan di atas:

    // Set posisi '.container' sebagai 'relative' (untuk kebutuhan animasi properti 'left')
    // Set lebar '.container' dengan ukuran s_wide
    // Set tinggi '.container' dengan ukuran s_height
    $container.css({
        'position':'relative',
        'width':s_wide,
        'height':s_height
    });

    Navigasi 

    Anda bisa saja menyisipkan setiap item navigasi secara manual dengan jumlah yang sama berdasarkan jumlah item slider. Tapi Saya lebih menyarankan untuk menggunakan cara otomatis, dengan jQuery .each()

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

    Eksekutor 

    Fungsi tugas dibuat setelah navigasi terbentuk, yaitu fungsi yang akan menganimasikan elemen .container ke arah kiri dengan jarak tertentu saat sebuah item navigasi diklik:

    $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); // Animasikan '.container'
    
        clearInterval(autoSlide); // Bersihkan interval slideshow otomatis...
    
        autoSlide = setInterval(slideShow, 3000); // Kemudian set kembali interval seperti semula.
    
        return false;
    
    }).first().addClass('active'); // Tambahkan kelas 'active' pada item navigasi pertama sebagai awalan

    Ada dua hal yang belum dijelaskan pada kode di atas, yaitu clearInterval(slideShow) dan setInterval(slideShow, 3000). Bagian itu akan dibuat di bawah:

    Utilitas Animasi Otomatis 

    Pertama, yang dibutuhkan adalah sebuah fungsi seperti ini:

    function slideShow() {
        if ($nav.find('.active').next().length) {
           // Saat item navigasi '.active' ditemukan, dan terdapat item navigasi lain disampingnya...
           // seleksi item navigasi di sampingnya kemudian picu event .click() padanya!
            $nav.find('.active').next().trigger("click");
        } else {
            // Jika tidak ditemukan, seleksi item navigasi yang pertama kemudian picu event .click() padanya!
            $nav.find('a').first().trigger("click");
        }
    }

    Tugasnya adalah untuk mengecek keberadaan item navigasi yang aktif (yang memiliki kelas active). Saat item tersebut ditemukan, maka jQuery akan melihat kepada item di sampingnya kemudian akan memicu event .click(), sehingga fungsi $nav.find('a').on("click", doSomething) yang kita buat sebelumnya bisa bekerja melalui perantara ini. Tambahan lainnya, jika elemen setelah item navigasi tidak ditemukan, maka pindahkan selektor .next() menjadi .first() untuk kembali ke bagian awal, menyeleksi item navigasi pertama.

    Terakhir, gunakan JavaScript setInterval() untuk menjalankan slideShow() secara otomatis berdasarkan interval tertentu. Di sini, Saya menggunakan interval selama 3 detik:

    // Variabel autoSlide bisa kita gunakan mulai sekarang :)
    autoSlide = setInterval(slideShow, 3000);

    Selanjutnya: Tip-Tip Modifikasi

    26 Komentar

    • Unknown

      alhamdulillah nemuin juga situs buat belajar blogging :-bd
      *saatnya berhenti dari kegaptekan \o/

      semoga saja yang punya blog mau ngajarin si newbie seperti saya ini :D

    • Anonim

      bookmark dulu. :)

    • Unknown

      Wah mantap penjelasannya :-bd
      ini bisa digunakan sebagai dasar dalam pembuatan slideshow..

      trima ksih Mas Taufik.. :)

    • Unknown

      btw ada artikel cara sprite banner gk kang?

      • Taufik Nurrohman

        Apaan tuh? Mungkin CSS Sprites? ⇒ csssprites.com

        • Unknown

          makasih kang taufik :D

          • Unknown

            btw saya mah bener2 gk faham cara ngutak ngatik blog ituh >.< padahal udah lumayan lama.... hikz.... jujur mau bangeut ada slide di side barnya namun saya praktekan gagal2 terus ~x( | kenapa coba? | karena saya bodoh :D

            • Taufik Nurrohman

              Untuk tahap awal coba ikuti langkah-langkah ini:

              Pertama-tama yang penting JQuery sudah terpasang di dalam template. Apa itu JQuery, cari pengertiannya dengan mencari melalui kotak penelusuran.
              Setelah itu buat sebuah widget HTML/JavaScript dan tambahkan kode ini di dalam formulirnya:

              <style type="text/css">
              #slider {
              width:300px; /* dimensi lebar */
              height:200px;; /* dimensi tinggi */
              margin:50px auto 0;
              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}
              #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;
              }
              .slide {
              font:normal normal 11px Arial,Sans-Serif;
              color:black;
              }
              .slide > div {
              padding:10px 15px;
              }
              .slide h2 {
              margin:0 0 10px;
              font-size:18px;
              font-weight:bold;
              }
              </style>
              <div id="slider">
              <div class="container">
              <div class="slide"> Slide 1 ... </div>
              <div class="slide"> Slide 2 ... </div>
              <div class="slide"> Slide 3 ... </div>
              <div class="slide"> Slide 4 ... </div>
              </div>
              </div>
              <nav id="slider-nav"></nav>
              <script type="text/javascript">
              (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);
              </script>

              Klik Simpan.

              • Unknown

                lho kok komentar saya hilang ya pas saya update www.kaze-kate.net :o

                sudah saya atur ukuranya, tapi cara masukan slidenya gmn ya? he.. >.< haduh afwan pasti saya akan jadi murid paling bawel Pak Hompimpah deh... hikz

                • Unknown

                  oh ya, tujuanya saya mau pasang ini slide untuk banner2 video wake up project yang ada di bawah.... terus mungkin nantinya mah slidnya nya itu mau saya pasang jadi ada lima. dan terus tiap banner mau saya pasang disana.... mohon info selanjutnya.... :D | sudah jalan alhamdulillah.... -_- pasti yang punya blog bakalan saya bikin bete deh

    • Rezq UzzY Fauzi

      mas kalo saya pake di localhost bisa ga?
      trus kalo cara pake jquery gmn sih?
      apa di attach kaya css ato gmn?
      maklum masih newbie B)

      • Taufik Nurrohman

        Klik kanan pada halaman demo, lalu pilih Save page as ⇒ HTML Complete
        Buka file download berekstensi .html
        Itu namanya sudah localhost :)

    • neylan

      ajari aku yg masih pemula ini ka...
      cara ataw sample aja untuk naro slidenya

    • Unknown

      Mas...kok saya udh praktekin tapi gak jalan yah???knp y mas?

    • Unknown

      mas kenapa semua slide yang mas berikan tidak keluar gambarnya di blog saya kecuali yg Agile Carousel? atau karena saya sudah pasang 1 slide show?

    • Robusta dampit

      terimah kasih gan

    • Unknown

      cara membuat slide show sama datanya menggunakan jquery dan ajax gimana caranya y ??

    Komentar telah ditutup.