Code Slider Sản Phẩm bằng Javascript

(function($) {         var shopeFfect = function(element, options) {             var settings = $.extend({}, $.fn.shopeffect.defaults, options);             var vars = {                 currentSlide: 0,                 currentImage: '',                 totalSlides: 0,                 randAnim: '',                 currentchange: 'prev',                 running: false,                 paused: false,                 stop: false             };              var slider = $(element);             var kids = slider.children();              var timer = 0;             timer = setInterval(function() {                 nivoRun(slider, kids, settings, false);             }, settings.pauseTime);              slider.bind('nivo:animFinished', function() {                 vars.running = false;                 //Hide child links                 if (vars.currentchange == 'prev') {                     slider.find('.mitem').css({                         left: '0px'                     });                     slider.find('.mitem').find('li').eq(0).remove();                 } else {                      slider.find('.mitem').find('li:last').remove();                 }                 //Trigger the afterChange callback                 settings.afterChange.call(this);             });              if (settings.pauseOnHover) {                 slider.hover(function() {                     vars.paused = true;                     clearInterval(timer);                     timer = '';                 }, function() {                     vars.paused = false;                     //Restart the timer                     if (timer == '' && !settings.manualAdvance) {                         timer = setInterval(function() {                             nivoRun(slider, kids, settings, vars.currentchange, false);                         }, settings.pauseTime);                     }                 });             }             $('.pre', slider).on('click', function() {                 if (vars.running) return false;                 clearInterval(timer);                 timer = '';                 vars.currentchange = 'prev';                 nivoRun(slider, kids, settings, vars.currentchange, false);             });             $('.next', slider).on('click', function() {                 if (vars.running) return false;                 clearInterval(timer);                 timer = '';                 vars.currentchange = 'next';                 nivoRun(slider, kids, settings, vars.currentchange, false);             });             var nivoRun = function(slider, kids, settings, change, nudge) {                 if (!change) {                     change = 'prev';                 }                 vars.running = true;                 if (change == "prev") {                     slider.find('.mitem').append(" 

"); slider.find('.mitem').animate({ left: -settings.SlideMoveWidth + "px" }, settings.animSpeed, function() { slider.trigger('nivo:animFinished'); }); } else { slider.find('.mitem').prepend("

"); // slider.find('.mitem').css({left : - settings.SlideMoveWidth}).animate({left: + 0 +"px" },settings.animSpeed).find('li:first').css({width : 0 + 'px'}).animate({ width: settings.SlideMoveWidth + 'px' },settings.animSpeed, function(){ slider.trigger('nivo:animFinished'); }) slider.find('.mitem').css({ left: -settings.SlideMoveWidth }).animate({ left: +0 + "px" }, settings.animSpeed, function() { slider.trigger('nivo:animFinished'); }) } } settings.afterLoad.call(this); return this; }; $.fn.shopeffect = function(options) { return this.each(function(key, value) { var element = $(this); shopeFfect($(element), options); }); }; //Default settings $.fn.shopeffect.defaults = { animSpeed: 800, pauseTime: 3000, startSlide: 0, SlideMoveWidth: 185, pauseOnHover: true, beforeChange: function() {}, afterChange: function() {}, slideshowEnd: function() {}, lastSlide: function() {}, afterLoad: function() {} }; $.fn._reverse = [].reverse; })(jQuery); (function($) { var shopeFfect = function(element, options) { var settings = $.extend({}, $.fn.shopeffect.defaults, options); var vars = { currentSlide: 0, currentImage: '', totalSlides: 0, randAnim: '', currentchange: 'prev', running: false, paused: false, stop: false }; var slider = $(element); var kids = slider.children(); var timer = 0; timer = setInterval(function() { nivoRun(slider, kids, settings, false); }, settings.pauseTime); slider.bind('nivo:animFinished', function() { vars.running = false; //Hide child links if (vars.currentchange == 'prev') { slider.find('.mitem').css({ left: '0px' }); slider.find('.mitem').find('li').eq(0).remove(); } else { slider.find('.mitem').find('li:last').remove(); } //Trigger the afterChange callback settings.afterChange.call(this); }); if (settings.pauseOnHover) { slider.hover(function() { vars.paused = true; clearInterval(timer); timer = ''; }, function() { vars.paused = false; //Restart the timer if (timer == '' && !settings.manualAdvance) { timer = setInterval(function() { nivoRun(slider, kids, settings, vars.currentchange, false); }, settings.pauseTime); } }); } $('.pre', slider).on('click', function() { if (vars.running) return false; clearInterval(timer); timer = ''; vars.currentchange = 'prev'; nivoRun(slider, kids, settings, vars.currentchange, false); }); $('.next', slider).on('click', function() { if (vars.running) return false; clearInterval(timer); timer = ''; vars.currentchange = 'next'; nivoRun(slider, kids, settings, vars.currentchange, false); }); var nivoRun = function(slider, kids, settings, change, nudge) { if (!change) { change = 'prev'; } vars.running = true; if (change == "prev") { slider.find('.mitem').append("

"); slider.find('.mitem').animate({ left: -settings.SlideMoveWidth + "px" }, settings.animSpeed, function() { slider.trigger('nivo:animFinished'); }); } else { slider.find('.mitem').prepend("

"); // slider.find('.mitem').css({left : - settings.SlideMoveWidth}).animate({left: + 0 +"px" },settings.animSpeed).find('li:first').css({width : 0 + 'px'}).animate({ width: settings.SlideMoveWidth + 'px' },settings.animSpeed, function(){ slider.trigger('nivo:animFinished'); }) slider.find('.mitem').css({ left: -settings.SlideMoveWidth }).animate({ left: +0 + "px" }, settings.animSpeed, function() { slider.trigger('nivo:animFinished'); }) } } settings.afterLoad.call(this); return this; }; $.fn.shopeffect = function(options) { return this.each(function(key, value) { var element = $(this); shopeFfect($(element), options); }); }; //Default settings $.fn.shopeffect.defaults = { animSpeed: 800, pauseTime: 3000, startSlide: 0, SlideMoveWidth: 185, pauseOnHover: true, beforeChange: function() {}, afterChange: function() {}, slideshowEnd: function() {}, lastSlide: function() {}, afterLoad: function() {} }; $.fn._reverse = [].reverse; })(jQuery); jQuery(function($) { $(window).ready(function() { $('#imageScroller').shopeffect(); }); });