1/** 2 * jquery.slitslider.js v1.1.0 3 * https://www.codrops.com 4 * 5 * Licensed under the MIT license. 6 * https://www.opensource.org/licenses/mit-license.php 7 * 8 * Copyright 2012, Codrops 9 * https://www.codrops.com 10 */ 11 12;( function( $, window, undefined ) { 13 14 'use strict'; 15 16 /* 17 * debouncedresize: special jQuery event that happens once after a window resize 18 * 19 * latest version and complete README available on Github: 20 * https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js 21 * 22 * Copyright 2011 @louis_remi 23 * Licensed under the MIT license. 24 */ 25 var $event = $.event, 26 $special, 27 resizeTimeout; 28 29 $special = $event.special.debouncedresize = { 30 setup: function() { 31 $( this ).on( "resize", $special.handler ); 32 }, 33 teardown: function() { 34 $( this ).off( "resize", $special.handler ); 35 }, 36 handler: function( event, execAsap ) { 37 // Save the context 38 var context = this, 39 args = arguments, 40 dispatch = function() { 41 // set correct event type 42 event.type = "debouncedresize"; 43 $event.dispatch.apply( context, args ); 44 }; 45 46 if ( resizeTimeout ) { 47 clearTimeout( resizeTimeout ); 48 } 49 50 execAsap ? 51 dispatch() : 52 resizeTimeout = setTimeout( dispatch, $special.threshold ); 53 }, 54 threshold: 20 55 }; 56 57 // global 58 var $window = $( window ), 59 $document = $( document ), 60 Modernizr = window.Modernizr; 61 62 $.Slitslider = function( options, element ) { 63 64 this.$elWrapper = $( element ); 65 this._init( options ); 66 67 }; 68 69 if(slit_slider_option.slider_autoplay == 'false'){ 70 $.Slitslider.defaults = { 71 // transitions speed 72 speed : slit_slider_option.slider_animation_time, 73 // if true the item's slices will also animate the opacity value 74 optOpacity : false, 75 // amount (%) to translate both slices - adjust as necessary 76 translateFactor : 230, 77 // maximum possible angle 78 maxAngle : 25, 79 // maximum possible scale 80 maxScale : 2, 81 // slideshow on / off 82 autoplay : false, 83 // keyboard navigation 84 keyboard : true, 85 // time between transitions 86 interval : slit_slider_option.slider_pause_time, 87 // callbacks 88 onBeforeChange : function( slide, idx ) { 89 return false; 90 }, 91 onAfterChange : function( slide, idx ) { 92 return false; 93 } 94 }; 95 }else{ 96 $.Slitslider.defaults = { 97 // transitions speed 98 speed : slit_slider_option.slider_animation_time, 99 // if true the item's slices will also animate the opacity value 100 optOpacity : false, 101 // amount (%) to translate both slices - adjust as necessary 102 translateFactor : 230, 103 // maximum possible angle 104 maxAngle : 25, 105 // maximum possible scale 106 maxScale : 2, 107 // slideshow on / off 108 autoplay : true, 109 // keyboard navigation 110 keyboard : true, 111 // time between transitions 112 interval : slit_slider_option.slider_pause_time, 113 // callbacks 114 onBeforeChange : function( slide, idx ) { 115 return false; 116 }, 117 onAfterChange : function( slide, idx ) { 118 return false;
119 } 120 }; 121 } 122 123 $.Slitslider.prototype = { 124 125 _init : function( options ) { 126 127 // options 128 this.options = $.extend( true, {}, $.Slitslider.defaults, options ); 129 130 // https://github.com/twitter/bootstrap/issues/2870 131 this.transEndEventNames = { 132 'WebkitTransition' : 'webkitTransitionEnd', 133 'MozTransition' : 'transitionend', 134 'OTransition' : 'oTransitionEnd', 135 'msTransition' : 'MSTransitionEnd', 136 'transition' : 'transitionend' 137 }; 138 this.transEndEventName = this.transEndEventNames[ Modernizr.prefixed( 'transition' ) ]; 139 // suport for css 3d transforms and css transitions 140 this.support = Modernizr.csstransitions && Modernizr.csstransforms3d; 141 // the slider 142 this.$el = this.$elWrapper.children( '.sl-slider' ); 143 // the slides 144 this.$slides = this.$el.children( '.sl-slide' ).hide(); 145 // total slides 146 this.slidesCount = this.$slides.length; 147 // current slide 148 this.current = 0; 149 // control if it's animating 150 this.isAnimating = false; 151 // get container size 152 this._getSize(); 153 // layout 154 this._layout(); 155 // load some events 156 this._loadEvents(); 157 // slideshow 158 if( this.options.autoplay ) { 159 160 this._startSlideshow(); 161 162 } 163 164 }, 165 // gets the current container width & height 166 _getSize : function() { 167 168 this.size = { 169 width : this.$elWrapper.outerWidth( true ), 170 height : this.$elWrapper.outerHeight( true ) 171 }; 172 173 }, 174 _layout : function() { 175 176 this.$slideWrapper = $( '<div class="sl-slides-wrapper" />' ); 177 178 // wrap the slides 179 this.$slides.wrapAll( this.$slideWrapper ).each( function( i ) { 180 181 var $slide = $( this ), 182 // vertical || horizontal 183 orientation = $slide.data( 'orientation' ); 184 185 $slide.addClass( 'sl-slide-' + orientation ) 186 .children() 187 .wrapAll( '<div class="sl-content-wrapper" />' ) 188 .wrapAll( '<div class="sl-content" />' ); 189 190 } ); 191 192 // set the right size of the slider/slides for the current window size 193 this._setSize(); 194 // show first slide 195 this.$slides.eq( this.current ).show(); 196 197 }, 198 _navigate : function( dir, pos ) { 199 200 if( this.isAnimating || this.slidesCount < 2 ) { 201 202 return false; 203 204 } 205 206 this.isAnimating = true; 207 208 var self = this, 209 $currentSlide = this.$slides.eq( this.current ); 210 211 // if position is passed 212 if( pos !== undefined ) { 213 214 this.current = pos; 215 216 } 217 // if not check the boundaries 218 else if( dir === 'next' ) { 219 220 this.current = this.current < this.slidesCount - 1 ? ++this.current : 0; 221 222 } 223 else if( dir === 'prev' ) { 224 225 this.current = this.current > 0 ? --this.current : this.slidesCount - 1; 226 227 } 228 229 this.options.onBeforeChange( $currentSlide, this.current ); 230 231 // next slide to be shown 232 var $nextSlide = this.$slides.eq( this.current ), 233 // the slide we want to cut and animate 234 $movingSlide = ( dir === 'next' ) ? $currentSlide : $nextSlide, 235 236 // the following are the data attrs set for each slide 237 configData = $movingSlide.data(), 238 config = {}; 239 240 config.orientation = configData.orientation || 'horizontal', 241 config.slice1angle = configData.slice1Rotation || 0, 242 config.slice1scale = configData.slice1Scale || 1, 243 config.slice2angle = configData.slice2Rotation || 0, 244 config.slice2scale = configData.slice2Scale || 1; 245 246 this._validateValues( config ); 247 248 var cssStyle = config.orientation === 'horizontal' ? { 249 marginTop : -this.size.height / 2 250 } : { 251 marginLeft : -this.size.width / 2 252 }, 253 // default slide's slices style 254 resetStyle = { 255 'transform' : 'translate(0%,0%) rotate(0deg) scale(1)', 256 opacity : 1 257 }, 258 // slice1 style 259 slice1Style = config.orientation === 'horizontal' ? { 260 'transform' : 'translateY(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg)
260scale(' + config.slice1scale + ')' 261 } : { 262 'transform' : 'translateX(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')' 263 }, 264 // slice2 style 265 slice2Style = config.orientation === 'horizontal' ? { 266 'transform' : 'translateY(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')' 267 } : { 268 'transform' : 'translateX(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')' 269 }; 270 271 if( this.options.optOpacity ) { 272 273 slice1Style.opacity = 0; 274 slice2Style.opacity = 0; 275 276 } 277 278 // we are adding the classes sl-trans-elems and sl-trans-back-elems to the slide that is either coming "next" 279 // or going "prev" according to the direction. 280 // the idea is to make it more interesting by giving some animations to the respective slide's elements 281 //( dir === 'next' ) ? $nextSlide.addClass( 'sl-trans-elems' ) : $currentSlide.addClass( 'sl-trans-back-elems' ); 282 283 $currentSlide.removeClass( 'sl-trans-elems' ); 284 285 var transitionProp = { 286 'transition' : 'all ' + this.options.speed + 'ms ease-in-out' 287 }; 288 289 // add the 2 slices and animate them 290 $movingSlide.css( 'z-index', this.slidesCount ) 291 .find( 'div.sl-content-wrapper' ) 292 .wrap( $( '<div class="sl-content-slice" />' ).css( transitionProp ) ) 293 .parent() 294 .cond( 295 dir === 'prev', 296 function() { 297 298 var slice = this; 299 this.css( slice1Style ); 300 setTimeout( function() { 301 302 slice.css( resetStyle ); 303 304 }, 50 ); 305 306 }, 307 function() { 308 309 var slice = this; 310 setTimeout( function() { 311 312 slice.css( slice1Style ); 313 314 }, 50 ); 315 316 } 317 ) 318 .clone() 319 .appendTo( $movingSlide ) 320 .cond( 321 dir === 'prev', 322 function() { 323 324 var slice = this; 325 this.css( slice2Style ); 326 setTimeout( function() { 327 328 $currentSlide.addClass( 'sl-trans-back-elems' ); 329 330 if( self.support ) { 331 332 slice.css( resetStyle ).on( self.transEndEventName, function() { 333 334 self._onEndNavigate( slice, $currentSlide, dir ); 335 336 } ); 337 338 } 339 else { 340 341 self._onEndNavigate( slice, $currentSlide, dir ); 342 343 } 344 345 }, 50 ); 346 347 }, 348 function() { 349 350 var slice = this; 351 setTimeout( function() { 352 353 $nextSlide.addClass( 'sl-trans-elems' ); 354 355 if( self.support ) { 356 357 slice.css( slice2Style ).on( self.transEndEventName, function() { 358 359 self._onEndNavigate( slice, $currentSlide, dir ); 360 361 } ); 362 363 } 364 else { 365 366 self._onEndNavigate( slice, $currentSlide, dir ); 367 368 } 369 370 }, 50 ); 371 372 } 373 ) 374 .find( 'div.sl-content-wrapper' ) 375 .css( cssStyle ); 376 377 $nextSlide.show(); 378 379 }, 380 _validateValues : function( config ) { 381 382 // OK, so we are restricting the angles and scale values here. 383 // This is to avoid the slices wrong sides to be shown. 384 // you can adjust these values as you wish but make sure you also ajust the 385 // paddings of the slides and also the options.translateFactor value and scale data attrs 386 if( config.slice1angle > this.options.maxAngle || config.slice1angle < -this.options.maxAngle ) { 387 388 config.slice1angle = this.options.maxAngle; 389 390 } 391 if( config.slice2angle > this.options.maxAngle || config.slice2angle < -this.options.maxAngle ) { 392 393 config.slice2angle = this.options.maxAngle; 394 395 } 396 if( config.slice1scale > this.options.maxScale || config.slice1scale <= 0 ) { 397 398 config.slice1scale = this.options.maxScale; 399 400 } 401 if( config.slice2scale > this.options.maxScale || config.slice2scale <= 0 ) { 402 403 config.slice2scale = this.options.maxScale; 404 405 } 406 if( config.orientation !== 'vertical' && config.orientation !== 'horizontal' ) { 407 408 config.orientation = 'horizontal' 409 410 } 411 412 }, 413 _onEndNavigate : function( $slice, $oldSlide, dir ) { 414 415 // reset previous slide's style after next slide is shown 416 var $slide = $slice.parent(), 417 removeClasses = 'sl-trans-elems sl-trans-back-elems'; 418 419 // remove second slide's slice 420 $slice.remove(); 421 // unwrap.. 422 $slide.css( 'z-index', 1 ) 423 .find( 'div.sl-content-wrapper' ) 424 .unwrap(); 425 426 // hide previous current slide 427 $oldSlide.hide().removeClass( removeClasses ); 428 $slide.removeClass( removeClasses ); 429 // now we can navigate again.. 430 this.isAnimating = false;
431 this.options.onAfterChange( $slide, this.current ); 432 433 }, 434 _setSize : function() { 435 436 // the slider and content wrappers will have the window's width and height 437 var cssStyle = { 438 width : this.size.width, 439 height : this.size.height 440 }; 441 442 this.$el.css( cssStyle ).find( 'div.sl-content-wrapper' ).css( cssStyle ); 443 444 }, 445 _loadEvents : function() { 446 447 var self = this; 448 449 $window.on( 'debouncedresize.slitslider', function( event ) { 450 451 // update size values 452 self._getSize(); 453 // set the sizes again 454 self._setSize(); 455 456 } ); 457 458 if ( this.options.keyboard ) { 459 460 $document.on( 'keydown.slitslider', function(e) { 461 462 var keyCode = e.keyCode || e.which, 463 arrow = { 464 left: 37, 465 up: 38, 466 right: 39, 467 down: 40 468 }; 469 470 switch (keyCode) { 471 472 case arrow.left : 473 474 self._stopSlideshow(); 475 self._navigate( 'prev' ); 476 break; 477 478 case arrow.right : 479 480 self._stopSlideshow(); 481 self._navigate( 'next' ); 482 break; 483 484 } 485 486 } ); 487 488 } 489 490 }, 491 _startSlideshow: function() { 492 493 var self = this; 494 495 this.slideshow = setTimeout( function() { 496 497 self._navigate( 'next' ); 498 499 if ( self.options.autoplay ) { 500 501 self._startSlideshow(); 502 503 } 504 505 }, this.options.interval ); 506 507 }, 508 _stopSlideshow: function() { 509 510 if ( this.options.autoplay ) { 511 512 clearTimeout( this.slideshow ); 513 this.isPlaying = false; 514 this.options.autoplay = false; 515 516 } 517 518 }, 519 _destroy : function( callback ) { 520 521 this.$el.off( '.slitslider' ).removeData( 'slitslider' ); 522 $window.off( '.slitslider' ); 523 $document.off( '.slitslider' ); 524 this.$slides.each( function( i ) { 525 526 var $slide = $( this ), 527 $content = $slide.find( 'div.sl-content' ).children(); 528 529 $content.appendTo( $slide ); 530 $slide.children( 'div.sl-content-wrapper' ).remove(); 531 532 } ); 533 this.$slides.unwrap( this.$slideWrapper ).hide(); 534 this.$slides.eq( 0 ).show(); 535 if( callback ) { 536 537 callback.call(); 538 539 } 540 541 }, 542 // public methos: adds more slides to the slider 543 add : function( $slides, callback ) { 544 545 this.$slides = this.$slides.add( $slides ); 546 547 var self = this; 548 549 550 $slides.each( function( i ) { 551 552 var $slide = $( this ), 553 // vertical || horizontal 554 orientation = $slide.data( 'orientation' ); 555 556 $slide.hide().addClass( 'sl-slide-' + orientation ) 557 .children() 558 .wrapAll( '<div class="sl-content-wrapper" />' ) 559 .wrapAll( '<div class="sl-content" />' ) 560 .end() 561 .appendTo( self.$el.find( 'div.sl-slides-wrapper' ) ); 562 563 } ); 564 565 this._setSize(); 566 567 this.slidesCount = this.$slides.length; 568 569 if ( callback ) { 570 571 callback.call( $items ); 572 573 } 574 575 }, 576 // public method: shows next slide 577 next : function() { 578 579 this._stopSlideshow(); 580 this._navigate( 'next' ); 581 582 }, 583 // public method: shows previous slide 584 previous : function() { 585 586 this._stopSlideshow(); 587 this._navigate( 'prev' ); 588 589 }, 590 // public method: goes to a specific slide 591 jump : function( pos ) { 592 593 pos -= 1; 594 595 if( pos === this.current || pos >= this.slidesCount || pos < 0 ) { 596 597 return false; 598 599 } 600 601 this._stopSlideshow(); 602 this._navigate( pos > this.current ? 'next' : 'prev', pos ); 603 604 }, 605 // public method: starts the slideshow 606 // any call to next(), previous() or jump() will stop the slideshow 607 play : function() { 608 609 if( !this.isPlaying ) { 610 611 this.isPlaying = true; 612 613 this._navigate( 'next' ); 614 this.options.autoplay = true; 615 this._startSlideshow(); 616 617 } 618 619 }, 620 // public method: pauses the slideshow 621 pause : function() { 622 623 if( this.isPlaying ) { 624 625 this._stopSlideshow(); 626 627 } 628 629 }, 630 // public method: check if isAnimating is true 631 isActive : function() { 632 633 return this.isAnimating; 634 635 }, 636 // publicc methos: destroys the slicebox instance 637 destroy : function( callback ) { 638 639 this._destroy( callback ); 640 641 } 642 643 }; 644 645 var logError = function( message ) { 646 647 if ( window.console ) { 648 649 window.console.error( message ); 650 651 } 652 653 }; 654 655 $.fn.slitslider = function( options ) { 656 657 var self = $.data( this, 'slitslider' ); 658 659 if ( typeof options === 'string' ) { 660 661 var args = Array.prototype.slice.call( arguments, 1 ); 662 663 this.each(function() { 664 665 if ( !self ) { 666 667 logError( "cannot call methods on slitslider prior to initialization; " + 668 "attempted to call method '" + options + "'" ); 669 return; 670 671 } 672 673 if ( !$.isFunction( self[options] ) || options.charAt(0) === "_" ) { 674 675 logError( "no such method '" + options + "' for slitslider self" ); 676 return; 677 678 } 679 680 self[ options ].apply( self, args ); 681 682 }); 683 684 } 685 else { 686 687 this.each(function() { 688 689 if ( self ) { 690 691 self._init(); 692 693 } 694 else { 695 696 self = $.data( this, 'slitslider', new $.Slitslider( options, this ) ); 697 698 } 699 700 }); 701 702 } 703 704 return self; 705 706 }; 707 708} )( jQuery, window );
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.