jQuery Efek Nivo Slider Tanpa Plugin

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 
  4. Konfigurasi 
Nivo Slider Like Effect Slideshow Without Plugin

Eksperimen membuat slideshow berdasarkan framework yang Saya buat di sini, untuk menciptakan slideshow dengan efek seperti Nivo Slider. Slideshow ini menggunakan konsep yang mirip dengan Nivo Slider, yaitu mengambil URL gambar untuk dijadikan sebagai latar slice. Efek bergelombang timbul dari .delay() animasi yang Saya set dengan nilai berurutan pada setiap slice:

HTML 

<figure id="slider">
    <div class="container">
        <img src="image/slide-1.jpg" alt="Deskripsi slide 1">
        <img src="image/slide-2.jpg" alt="Deskripsi slide 2">
        <img src="image/slide-3.jpg" alt="Deskripsi slide 3">
        <img src="image/slide-4.jpg" alt="Deskripsi slide 4">
    </div>
    <figcaption></figcaption>
    <nav id="slider-nav"></nav>
</figure>

CSS 

/* Slider */
#slider {
  display:block;
  border:4px solid #000;
  width:400px; /* slider width */
  height:250px; /* slider height */
  margin:0 auto;
  background:white url('img/loading.gif') no-repeat 50% 50%;
  overflow:hidden;
  position:relative;
}

/* For 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; /* hide the caption with this way :) */
  left:0;
  z-index:99;
}

#slider img {
  display:block;
  margin:0 0;
  width:400px; /* slide width */
  height:250px; /* slide height */
  position:absolute;
  top:0;
  left:0;
}

/* Navigation */
#slider-nav {
  display:block;
  position:absolute;
  top:10px;
  right:10px;
  margin:0 0;
  padding:0 0;
  z-index:99;
}

#slider-nav a {
  display:block;
  float:left;
  width:10px;
  height:10px;
  background-color:#111;
  font-size:0;
  color:transparent;
  overflow:hidden;
  text-indent:-99px;
  margin:0 2px 0 0;
  border:2px solid white;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  -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);
}

#slider-nav .active {
  background-color:#2589B4;
}

/* Hide all element inside the '#slider' until the page has been loaded! */
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}

jQuery 

/**
 * NIVO SLIDER LIKE EFFECT SLIDESHOW BY TAUFIK NURROHMAN
 * URL: https://plus.google.com/108949996304093815163/about
 * Based on this slideshow framework: http://www.dte.web.id/2012/09/simple-useful-jquery-slideshow.html
 */

(function($) {

// ==================================================================================
// Configuration here:
// ----------------------------------------------------------------------------------
    var config = {
        slices: 10, // number of slices
        speed: 600, // slideshow speed
        easing: null, // easing type
        interval: 3000 // slideshow interval
    };
// ==================================================================================

    // Some variables...
    var $slider = $('#slider'),
        $caption = $slider.find('figcaption'),
        $container = $slider.find('.container'),
        $nav = $('#slider-nav'),
        $slide = $container.children(),
        autoSlide = null,
        $first = $slide.first();

    // Auto append navigation item based on the slides length
    $slide.each(function(index) {
        var i = index + 1;
        $nav.append('<a href="#slide-'+i+'">'+i+'</a>');
        $(this).attr('id', 'slide-'+i);
    });

    // Set the slices size
    var slice_w = $slider.width() / config.slices,
        slice_h = $slider.height();

    // Build the slices
    for (var i = 0; i < config.slices; i++) {
        $('<div class="slice" />').css({
            'position':'absolute',
            'width':slice_w,
            'height':slice_h,
            'left':slice_w*i,
            'z-index':4,
            'background-color':'transparent',
            'background-repeat':'no-repeat',
            'background-position':'-' + slice_w*i + 'px 0'
        }).appendTo($slider);
    }

    // Catch the slices, and also set the different position between odd and even slices
    var $sliceOdd = $slider.find('.slice:odd').css('bottom',0),
        $sliceEven = $slider.find('.slice:even').css('top',0);

    // Click to switch!
    $nav.find('a').on("click", function() {

        $nav.find('.active').removeClass('active');
        $(this).addClass('active');

        var pos = $(this).index(),
            text = $slide.eq(pos).attr('alt'),
            bg = $slide.eq(pos).attr('src');

        $slide.hide().eq(pos).trigger("load").show();

        // Do the caption and slices animation here!
        $caption.stop().animate({bottom:'-100px'}, config.speed/2);

        $sliceOdd.each(function(i) {
            $(this).stop().delay(i*100).animate({bottom:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
                $(this).css({
                    'background-image':'url('+bg+')',
                    'bottom':0,
                    'opacity':1
                });
            });
        });
        $sliceEven.each(function(i) {
            $(this).stop().delay(i*100).animate({top:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
                $(this).css({
                    'background-image':'url('+bg+')',
                    'top':0,
                    'opacity':1
                });
            });
        }).promise().done(function() {
            $caption.html(text).stop().animate({bottom:'0'}, config.speed/2);
        });

        clearInterval(autoSlide);
        autoSlide = setInterval(slideShow, config.interval);

        return false;

    }).first().addClass('active');

    // Init slideshow
    $caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, config.speed);

    // Navigation clicker
    function slideShow() {
        if ($nav.find('.active').next().length) {
            $nav.find('.active').next().trigger("click");
        } else {
            $nav.find('a').first().trigger("click");
        }
    }

    // Run the slideshow on page load...
    $(window).on("load", function() {

        // remove the 'loading background-image' of '#slider'
        $slider.css('background-image','none');

        // Show the '.container', 'figcaption' and '#slide-nav' when the page has been loaded!
        $container.show();
        $caption.show();
        $nav.css('opacity',1);

        // Another init slideshow
        $slider.find('.slice').css('background-image', 'url('+$first.attr("src")+')');

        // Then, start the interval...
        autoSlide = setInterval(slideShow, config.interval);

    });

})(jQuery);

Lihat Demo Salinan di CSSDeck

Konfigurasi 

OpsiKeterangan
slicesJumlah potingan slide.
speedKecepatan slideshow.
easingTipe easing animasi.
intervalInterval slideshow.

17 Komentar

  • Unknown

    Keren Efeknya,
    Ngga ada bedanya kalo make ataupun tanpa plugin :-bd

  • Unknown

    PeRTAMAXXXX

  • Unknown

    caara letakkan jquery di mna ya?

  • smartpulsa-88

    Wow kereen...siip abis Gan...

  • Faza Afrizal

    ane coba kok setelah saya lihat hasilnya gambarnya cuma putih doang yaa??
    itu kenapa??

  • Taufik Nurrohman

    Mungkin library JQuery belum dipasang. Cek kode sumber halaman demo di atas dan lihat bagaimana cara Saya menyusun kodenya.

  • Nasir MA

    Utk masalah tampilan putih doang, betul bgt kata bang Taufik nie biasanya krn blm pasang library JQuery-nya. Soalnya ane jg pernah n coba-coba beberapa versi library JQuery akhirnya ada yg nyangkut jg.

    Skalian mo nanya bang Taufik nie,
    Klo mo bikin effek random pd kode JQuery slider di atas (tanpa plugin) gmn caranya ya?
    Makasih bgt atas responnya bang.

  • Taufik Nurrohman

    Ini cuma alternatif slideshow yang ringan sekaligus sebagai contoh sederhana untuk menunjukkan bagaimana NivoSlider bekerja. Kalau ingin membuat efek random seperti NivoSlider yang asli ya pakai saja NivoSlider yang asli. Kenapa susah-susah memodifikasi NivoSlider yang palsu untuk membuatnya sama persis dengan NivoSlider yang asli? Mindo gaweni ~x(

  • Unknown

    om supaya nivo slider ini jd responsive bagaimana cara nya?
    kayak punya om di homepage itu,...

    :-bd

  • Imron Fhatoni

    mas taufik saya mau nanya pada saat saya membuat slider dan meggunakannya pada homepage blog tampilannya normal saja akan tetapi pada url tujuan saya mengarahkannya pada label postingan saya seperti disini
    yang saya mau tanyakan pada url tujuan yang saya arahkan malah hasilnya berbeda mas taufik tidak pada label yang seharusnya...

    itu untuk mengatasinya bagaimana mas..
    mohon pencerahannya...

  • Unknown

    Mas tanya, cara nambahin navigasi next & preview gmana?...

  • Unknown

    mas mau tanya, bagaimana cara biar gambar di slidernya bisa dikasih link terus diklik? thanks :-bd

  • Taufik Nurrohman

    Cuma bisa ditambahkan di bagian caption. Caranya set nilai atribut alt gambar menjadi seperti ini:

    alt="&lt;a href=&quot;http://example.com&quot;&gt;TEKS TAUTAN&lt;/a&gt;"
  • Ijal Fauzi

    Ada kelebian titik koma dibagian slider height mas :)

  • Taufik Nurrohman

    Yep.

  • Unknown

    makasih banyak mas, ini lebih dari cukup, sukses terus blognya :-bd

  • Unknown

    Alhamdulillah dapet petromaxx gan :D

Komentar telah ditutup.