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

code

Thích Code | June 20, 2016 | Edit Post

Có 1 bạn nhờ mình lấy code slider sản phẩm từ trang web http://www.premiumsneakers.kr/ và mình lấy code theo hình sau

Có 1 bạn nhờ mình lấy code slider sản phẩm từ trang web http://www.premiumsneakers.kr/ và mình lấy code theo hình sau:

HTML
CSS
JS
Result
Code by ThichCode.NET

(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("
<li>" + slider.find('.mitem').find('li:first').html() + "</li>
");
                    slider.find('.mitem').animate({
                        left: -settings.SlideMoveWidth + "px"
                    }, settings.animSpeed, function() {
                        slider.trigger('nivo:animFinished');
                    });
                } else {
                    slider.find('.mitem').prepend("
<li>" + slider.find('.mitem').find('li:last').html() + "</li>
");
                    // 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.find('.mitem').find('li:last').remove();
                }
                //Trigger the afterChange callback
                settings.afterChange.call(this);
            });

settings.afterLoad.call(this);
            return this;
        };

$.fn.shopeffect = function(options) {
            return this.each(function(key, value) {
                var element = $(this);
                shopeFfect($(element), options);
            });

};

$.fn._reverse = [].reverse;

})(jQuery);

jQuery(function($) {
        $(window).ready(function() {
            $('#imageScroller').shopeffect();
        });
    });

Thích Code | June 20, 2016 | Edit Post

ThichCode.NET

My blog

articles about technology, tricks, programming, ... from practical experience.

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

1 comment:

Most read

Latest