', { 'class': this.options.arrowsWrapperClass }).appendTo( /** * Setting append target * If option is true set default target, that is slider wrapper * Else get target set in options * @type {Bool or String} */ (this.options.arrows === true) ? this.parent : this.options.arrows ); /** * Right arrow * @type {Obejct} */ this.arrows.right = $('

', { 'class': this.options.arrowMainClass + ' ' + this.options.arrowRightClass, // Direction and distance -> One forward 'data-distance': '1', 'html': this.options.arrowRightText }).appendTo(this.arrows.wrapper); /** * Left arrow * @type {Object} */ this.arrows.left = $('

', { 'class': this.options.arrowMainClass + ' ' + this.options.arrowLeftClass, // Direction and distance -> One backward 'data-distance': '-1', 'html': this.options.arrowLeftText }).appendTo(this.arrows.wrapper); }; /** * Function bindings */ Glide.prototype.bindings = function() { var self = this, o = this.options, prefix = this.css.getPrefix(); /** * Setup slider wrapper bindings * for translate and transition control */ this.wrapper.bind({ /** * Set transition */ 'setTransition': function() { $(this).css( prefix + 'transition', prefix + 'transform ' + o.animationDuration + 'ms ' + o.animationTimingFunc); }, /** * Clear transition * for immediate jump effect */ 'clearTransition': function() { $(this).css( prefix + 'transition', 'none'); }, /** * Set translate value * @param {Object} event * @param {Ind} translate */ 'setTranslate': function(event, translate) { // if css3 suported set translate3d if (self.cssSupport) $(this).css( prefix + 'transform', 'translate3d(' + translate + 'px, 0px, 0px)'); // if not set left margin else $(this).css('margin-left', translate); } }); }; /** * Events controllers */ Glide.prototype.events = function() { /** * Swipe * If swipe option is true * Attach touch events */ if (this.options.touchDistance) { this.parent.on({ 'touchstart MSPointerDown': $.proxy(this.events.touchstart, this), 'touchmove MSPointerMove': $.proxy(this.events.touchmove, this), 'touchend MSPointerUp': $.proxy(this.events.touchend, this) }); } /** * Arrows * If arrows exists * Attach click event */ if (this.arrows.wrapper) { $(this.arrows.wrapper).children().on('click touchstart', $.proxy(this.events.arrows, this) ); } /** * Navigation * If navigation exists * Attach click event */ if (this.navigation.wrapper) { $(this.navigation.wrapper).children().on('click touchstart', $.proxy(this.events.navigation, this) ); } /** * Keyboard * If keyboard option is true * Attach press event */ if (this.options.keyboard) { $(document).on('keyup.glideKeyup', $.proxy(this.events.keyboard, this) ); } /** * Slider hover * If hover option is true * Attach hover event */ if (this.options.hoverpause) { this.parent.on('mouseover mouseout', $.proxy(this.events.hover, this) ); } /** * Slider resize * On window resize * Attach resize event */ $(window).on('resize', $.proxy(this.events.resize, this) ); }; /** * Navigation event controller * On click in navigation item get distance * Then slide specified distance with jump */ Glide.prototype.events.navigation = function(event) { if ( !this.wrapper.attr('disabled') ) { // Prevent default behaviour event.preventDefault(); // Slide distance specified in data attribute this.slide( $(event.currentTarget).data('distance'), true ); } }; /** * Arrows event controller * On click in arrows get direction and distance * Then slide specified distance without jump * @param {Obejct} event */ Glide.prototype.events.arrows = function(event) { if ( !this.wrapper.attr('disabled') ) { // Prevent default behaviour event.preventDefault(); // Slide distance specified in data attribute this.slide( $(event.currentTarget).data('distance'), false ); } }; /** * Keyboard arrows event controller * Keyboard left and right arrow keys press */ Glide.prototype.events.keyboard = function(event) { if ( !this.wrapper.attr('disabled') ) { // Next if (event.keyCode === 39) this.slide(1); // Prev if (event.keyCode === 37) this.slide(-1); } }; /** * When mouse is over slider, pause autoplay * On out, start autoplay again */ Glide.prototype.events.hover = function(event) { // Pasue autoplay this.pause(); // When mouse left slider or touch end, start autoplay anew if (event.type === 'mouseout') this.play(); }; /** * When resize browser window * Reinit plugin for new slider dimensions * Correct crop to current slide */ Glide.prototype.events.resize = function(event) { // Reinit plugin (set new slider dimensions) this.dimensions(); // Crop to current slide this.slide(0); }; /** * Disable events thats controls slide changes */ Glide.prototype.disableEvents = function() { this.wrapper.attr( 'disabled', true ); }; /** * Enable events thats controls slide changes */ Glide.prototype.enableEvents = function() { this.wrapper.attr( 'disabled', false ); }; /** * Touch start * @param {Object} e event */ Glide.prototype.events.touchstart = function(event) { if ( !this.wrapper.attr('disabled') ) { // Cache event var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0]; // Get touch start points this.events.touchStartX = touch.pageX; this.events.touchStartY = touch.pageY; this.events.touchSin = null; } }; /** * Touch move * From swipe length segments calculate swipe angle * @param {Obejct} e event */ Glide.prototype.events.touchmove = function(event) { if ( !this.wrapper.attr('disabled') ) { // Cache event var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0]; // Calculate start, end points var subExSx = touch.pageX - this.events.touchStartX; var subEySy = touch.pageY - this.events.touchStartY; // Bitwise subExSx pow var powEX = Math.abs( subExSx << 2 ); // Bitwise subEySy pow var powEY = Math.abs( subEySy << 2 ); // Calculate the length of the hypotenuse segment var touchHypotenuse = Math.sqrt( powEX + powEY ); // Calculate the length of the cathetus segment var touchCathetus = Math.sqrt( powEY ); // Calculate the sine of the angle this.events.touchSin = Math.asin( touchCathetus/touchHypotenuse ); if ( (this.events.touchSin * (180 / Math.PI)) < 45 ) event.preventDefault(); } }; /** * Touch end * @param {Object} e event */ Glide.prototype.events.touchend = function(event) { if ( !this.wrapper.attr('disabled') ) { // Cache event var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0]; // Calculate touch distance var touchDistance = touch.pageX - this.events.touchStartX; // While touch is positive and greater than distance set in options if ( (touchDistance > this.options.touchDistance) && ( (this.events.touchSin * (180 / Math.PI)) < 45) ) { // Slide one backward this.slide(-1); // While touch is negative and lower than negative distance set in options } else if ( (touchDistance < -this.options.touchDistance) && ( (this.events.touchSin * (180 / Math.PI)) < 45) ) { // Slide one forward this.slide(1); } } }; /** * Slides change & animate logic * @param {int} distance * @param {bool} jump * @param {function} callback */ Glide.prototype.slide = function(distance, jump, callback) { // If there is one slide, escape if (this.slides.length <= 1) { return false; } /** * Stop autoplay * Clearing timer */ this.pause(); // Callbacks before slide change this.options.beforeTransition.call(this); // Setup variables var self = this, currentSlide = (jump) ? 0 : this.currentSlide, slidesLength = -(this.slides.length-1), fromFirst = false, fromLast = false; /** * Check if current slide is first and direction is previous, then go to last slide * or current slide is last and direction is next, then go to the first slide * else change current slide normally */ if ( currentSlide === 0 && distance === -1 ) { fromFirst = true; currentSlide = slidesLength; } else if ( currentSlide === slidesLength && distance === 1 ) { fromLast = true; currentSlide = 0; } else { currentSlide = currentSlide + (-distance); } /** * Crop to current slide. * Mul slide width by current slide number. */ var offset = this.slides.spread * currentSlide; /* * Add sliderCurrentItemClass to active slider. * Get right element when circular is active */ if (this.options.circular) { $('.slider__wrapper').children() .eq(-currentSlide + 1).addClass(this.options.sliderCurrentItemClass) .siblings() .removeClass(this.options.sliderCurrentItemClass); } else { $('.slider__wrapper').children() .eq(-currentSlide).addClass(this.options.sliderCurrentItemClass) .siblings() .removeClass(this.options.sliderCurrentItemClass); } /** * While circular decrease offset with the width of single slide * When fromFirst and fromLast flags are set, unbind events thats controls changing * When fromLast flags is set, set offset to slide width mulled by slides count without cloned slides * When fromFirst flags is set, set offset to zero */ if (this.options.circular) { offset = offset - this.slides.spread; if (fromLast || fromFirst) this.disableEvents(); if (fromLast) offset = this.slides.spread * (slidesLength - 2); if (fromFirst) offset = 0; } /** * Slide change animation * While CSS3 is supported use offset * if not, use $.animate(); */ if (this.options.transitionType == 'slide') { if (this.cssSupport) this.wrapper.trigger('setTransition').trigger('setTranslate', [offset]); else this.wrapper.stop().animate({ 'margin-left': offset }, this.options.animationDuration); } else { /* * Change duration value when css transition is supported */ if (this.cssSupport) { tempAnimationDuration = 0; // transition is done by CSS } else { tempAnimationDuration = this.options.animationDuration; } // Set item current class to slider $('.slider__wrapper').children() .eq(-currentSlide) .css('z-index', '2') .stop(true, false).animate({ opacity: 1 },tempAnimationDuration) .siblings() .css('z-index', '1') .stop(true, true).delay(tempAnimationDuration).animate({ opacity: 0 },0); } /** * While circular */ if (this.options.circular) { /** * When fromFirst and fromLast flags are set * after animation clear transition and bind events that control slides changing */ if (fromFirst || fromLast) { this.afterAnimation(function(){ self.wrapper.trigger('clearTransition'); self.enableEvents(); }); } /** * When fromLast flag is set * after animation make immediate jump from cloned slide to proper one */ if (fromLast) { this.afterAnimation(function(){ fromLast = false; self.wrapper.trigger('setTranslate', [-self.slides.spread]); }); } /** * When fromFirst flag is set * after animation make immediate jump from cloned slide to proper one */ if (fromFirst) { this.afterAnimation(function(){ fromFirst = false; self.wrapper.trigger('setTranslate', [self.slides.spread * (slidesLength-1)]); }); } } // Set to navigation item current class if (this.options.navigation && this.navigation.wrapper) { $('.' + this.options.navigationClass, (this.options.navigation === true) ? this.parent : this.options.navigation).children() .eq(-currentSlide) .addClass(this.options.navigationCurrentItemClass) .siblings() .removeClass(this.options.navigationCurrentItemClass); } // Update current slide globaly this.currentSlide = currentSlide; // Callbacks after slide change this.afterAnimation(function(){ self.options.afterTransition.call(self); if ( (callback !== 'undefined') && (typeof callback === 'function') ) callback(); }); /** * Start autoplay * Setting up timer */ this.play(); }; /** * Autoplay logic * Setup counting */ Glide.prototype.play = function() { // Cache this var self = this; /** * If autoplay turn on * Slide one forward after a set time */ if (this.options.autoplay) { this.auto = setInterval(function() { self.slide(1, false); }, this.options.autoplay); } }; /** * Autoplay pause * Clear counting */ Glide.prototype.pause = function() { /** * If autoplay turn on * Clear interial */ if (this.options.autoplay) this.auto = clearInterval(this.auto); }; /** * Call callback after animation duration * Added 10 ms to duration to be sure is fired after animation * @param {Function} callback */ Glide.prototype.afterAnimation = function(callback) { setTimeout(function(){ callback(); }, this.options.animationDuration + 10); }; /** * Dimensions * Get & set dimensions of slider elements */ Glide.prototype.dimensions = function() { // Get slide width this.slides.spread = this.parent.width(); // Set wrapper width if (this.options.transitionType == 'slide') { this.wrapper.width(this.slides.spread * (this.slides.length + this.offset)); } else { this.wrapper.width(this.slides.spread); } // Set slide width this.slides.add(this.firstClone).add(this.lastClone).width(this.slides.spread); }; /** * Destroy * Revert init modifications and freeze slides */ Glide.prototype.destroy = function() { this.parent.unbind(); this.wrapper.unbind(); this.wrapper.removeAttr("style"); $(this.navigation.wrapper).children().unbind(); $(this.arrows.wrapper).children().unbind(); this.slide(0, true); this.pause(); if(this.options.circular) { this.firstClone.remove(); this.lastClone.remove(); } }; /** * Initialize * Set wrapper * Set slides * Set animation type */ Glide.prototype.init = function() { // Set slides wrapper this.wrapper = this.parent.children(); // Set slides this.slides = this.wrapper.children(); // Set slider dimentions this.dimensions(); // Build DOM this.build(); }; /** * Methods for css3 management */ Glide.prototype.css = { /** * Check css3 support * @param {String} Declaration name to check * @return {Boolean} */ isSupported: function(declaration) { var isSupported = false, prefixes = 'Khtml ms O Moz Webkit'.split(' '), clone = document.createElement('div'), declarationCapital = null; declaration = declaration.toLowerCase(); if (clone.style[declaration] !== undefined) isSupported = true; if (isSupported === false) { declarationCapital = declaration.charAt(0).toUpperCase() + declaration.substr(1); for( var i = 0; i < prefixes.length; i++ ) { if( clone.style[prefixes[i] + declarationCapital ] !== undefined ) { isSupported = true; break; } } } if (window.opera) { if (window.opera.version() < 13) isSupported = false; } if (isSupported === 'undefined' || isSupported === undefined) isSupported = false; return isSupported; }, /** * Get browser css prefix * @return {String} Returns prefix in "-{prefix}-" format */ getPrefix: function () { if (!window.getComputedStyle) return ''; var styles = window.getComputedStyle(document.documentElement, ''); return '-' + (Array.prototype.slice .call(styles) .join('') .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']) )[1] + '-'; } }; $.fn[name] = function(options) { return this.each(function () { if ( !$.data(this, 'api_' + name) ) { $.data(this, 'api_' + name, new Glide($(this), options) ); } }); }; })(jQuery, window, document); ------jquery.glide.js以上