Hay sobat,,. apa kabar,.?? sudah lama nie saya gak ngeshare Efek gambar Heheheee Untuk efek yang akan saya share hari ini gak kalah menarik dengan efek2 yang sebelumnya dan 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:
/* Hide all element inside the '#slider' until the page has been loaded! */ #slider .container, #slider figcaption {display:none} #slider-nav {opacity:0}
5. Kemudian tambahkan kode JQuery berikut ini tepat diatas kode </head>
/** * NIVO SLIDER LIKE EFFECT SLIDESHOW * URL: https://plus.google.com/116872946466272383878/about * Based on this slideshow framework: http://irvan-efendy.blogspot.com **/
(function($) {
// ============================================================================== // Configuration here: // ------------------------------------------------------------------------------ var config = { slices: 10, // number of slices speed: 600, // slideshow speed easing: null, // easing type interval: 3000 // slideshow interval }; // ==============================================================================
// 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() {
Okeyy,.. cukup sekian dulu tutorial yang bisa saya sampaikan semoga bermanfaat,..
Terima kasih telah membaca artikel tentang Membuat efek nivo slider pada gambar di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.