1/** 2 * jquery.cbpFWSlider.js v1.0.0 3 * http://www.codrops.com 4 * 5 * Licensed under the MIT license. 6 * http://www.opensource.org/licenses/mit-license.php 7 * 8 * Copyright 2013, Codrops 9 * http://www.codrops.com 10 */ 11;( function( $, window, undefined ) { 12 13 'use strict'; 14 15 // global 16 var Modernizr = window.Modernizr; 17 18 $.CBPFWSlider = function( options, element ) { 19 this.$el = $( element ); 20 this._init( options ); 21 }; 22 23 // the options 24 $.CBPFWSlider.defaults = { 25 // default transition speed (ms) 26 speed : 500, 27 // default transition easing 28 easing : 'ease' 29 }; 30 31 $.CBPFWSlider.prototype = { 32 _init : function( options ) { 33 // options 34 this.options = $.extend( true, {}, $.CBPFWSlider.defaults, options ); 35 // cache some elements and initialize some variables 36 this._config(); 37 // initialize/bind the events 38 this._initEvents(); 39 }, 40 _config : function() { 41 42 // the list of items 43 this.$list = this.$el.children( 'ul' ); 44 // the items (li elements) 45 this.$items = this.$list.children( 'li' ); 46 // total number of items 47 this.itemsCount = this.$items.length; 48 // support for CSS Transitions & transforms 49 this.support = Modernizr.csstransitions && Modernizr.csstransforms;
50 this.support3d = Modernizr.csstransforms3d; 51 // transition end event name and transform name 52 // transition end event name 53 var transEndEventNames = { 54 'WebkitTransition' : 'webkitTransitionEnd', 55 'MozTransition' : 'transitionend', 56 'OTransition' : 'oTransitionEnd', 57 'msTransition' : 'MSTransitionEnd', 58 'transition' : 'transitionend' 59 }, 60 transformNames = { 61 'WebkitTransform' : '-webkit-transform', 62 'MozTransform' : '-moz-transform', 63 'OTransform' : '-o-transform', 64 'msTransform' : '-ms-transform', 65 'transform' : 'transform' 66 }; 67 68 if( this.support ) { 69 this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.cbpFWSlider'; 70 this.transformName = transformNames[ Modernizr.prefixed( 'transform' ) ]; 71 } 72 // current and old itemôs index 73 this.current = 0; 74 this.old = 0; 75 // check if the list is currently moving 76 this.isAnimating = false; 77 // the list (ul) will have a width of 100% x itemsCount 78 this.$list.css( 'width', 100 * this.itemsCount + '%' ); 79 // apply the transition 80 if( this.support ) { 81 this.$list.css( 'transition', this.transformName + ' ' + this.options.speed + 'ms ' + this.options.easing ); 82 } 83 // each item will have a width of 100 / itemsCount 84 this.$items.css( 'width', 100 / this.itemsCount + '%' ); 85 // add navigation arrows and the navigation dots if there is more than 1 item 86 if( this.itemsCount > 1 ) { 87 88 // add navigation arrows (the previous arrow is not shown initially): 89 this.$navPrev = $( '<span class="cbp-fwprev"><</span>' ).hide(); 90 this.$navNext = $( '<span class="cbp-fwnext">></span>' ); 91 $( '<nav/>' ).append( this.$navPrev, this.$navNext ).appendTo( this.$el ); 92 // add navigation dots 93 var dots = ''; 94 for( var i = 0; i < this.itemsCount; ++i ) { 95 // current dot will have the class cbp-fwcurrent 96 var dot = i === this.current ? '<span class="cbp-fwcurrent"></span>' : '<span></span>'; 97 dots += dot; 98 } 99 var navDots = $( '<div class="cbp-fwdots"/>' ).append( dots ).appendTo( this.$el ); 100 this.$navDots = navDots.children( 'span' ); 101 102 } 103 104 }, 105 _initEvents : function() { 106 107 var self = this; 108 if( this.itemsCount > 1 ) { 109 this.$navPrev.on( 'click.cbpFWSlider', $.proxy( this._navigate, this, 'previous' ) ); 110 this.$navNext.on( 'click.cbpFWSlider', $.proxy( this._navigate, this, 'next' ) ); 111 this.$navDots.on( 'click.cbpFWSlider', function() { self._jump( $( this ).index() ); } ); 112 } 113 114 }, 115 _navigate : function( direction ) { 116 117 // do nothing if the list is currently moving 118 if( this.isAnimating ) { 119 return false; 120 } 121 122 this.isAnimating = true; 123 // update old and current values 124 this.old = this.current; 125 if( direction === 'next' && this.current < this.itemsCount - 1 ) { 126 ++this.current; 127 } 128 else if( direction === 'previous' && this.current > 0 ) { 129 --this.current; 130 } 131 // slide 132 this._slide(); 133 134 }, 135 _slide : function() { 136 137 // check which navigation arrows should be shown 138 this._toggleNavControls(); 139 // translate value 140 var translateVal = -1 * this.current * 100 / this.itemsCount; 141 if( this.support ) { 142 this.$list.css( 'transform', this.support3d ? 'translate3d(' + translateVal + '%,0,0)' : 'translate(' + translateVal + '%)' ); 143 } 144 else { 145 this.$list.css( 'margin-left', -1 * this.current * 100 + '%' ); 146 } 147 148 var transitionendfn = $.proxy( function() { 149 this.isAnimating = false; 150 }, this ); 151 152 if( this.support ) { 153 this.$list.on( this.transEndEventName, $.proxy( transitionendfn, this ) ); 154 } 155 else { 156 transitionendfn.call(); 157 } 158 159 }, 160 _toggleNavControls : function() { 161 162 // if the current item is the first one in the list, the left arrow is not shown 163 // if the current item is the last one in the list, the right arrow is not shown 164 switch( this.current ) { 165 case 0 : this.$navNext.show(); this.$navPrev.hide(); break; 166 case this.itemsCount - 1 : this.$navNext.hide(); this.$navPrev.show(); break; 167 default : this.$navNext.show(); this.$navPrev.show(); break; 168 } 169 // highlight navigation dot 170 this.$navDots.eq( this.old ).removeClass( 'cbp-fwcurrent' ).end().eq( this.current ).addClass( 'cbp-fwcurrent' ); 171 172 }, 173 _jump : function( position ) { 174 175 // do nothing if clicking on the current dot, or if the list is currently moving 176 if( position === this.current || this.isAnimating ) { 177 return false; 178 } 179 this.isAnimating = true; 180 // update old and current values 181 this.old = this.current; 182 this.current = position; 183 // slide 184 this._slide(); 185 186 }, 187 destroy : function() { 188 189 if( this.itemsCount > 1 ) { 190 this.$navPrev.parent().remove(); 191 this.$navDots.parent().remove(); 192 } 193 this.$list.css( 'width', 'auto' ); 194 if( this.support ) { 195 this.$list.css( 'transition', 'none' ); 196 } 197 this.$items.css( 'width', 'auto' ); 198 199 } 200 }; 201 202 var logError = function( message ) { 203 if ( window.console ) { 204 window.console.error( message ); 205 } 206 }; 207 208 $.fn.cbpFWSlider = function( options ) { 209 if ( typeof options === 'string' ) { 210 var args = Array.prototype.slice.call( arguments, 1 ); 211 this.each(function() { 212 var instance = $.data( this, 'cbpFWSlider' ); 213 if ( !instance ) { 214 logError( "cannot call methods on cbpFWSlider prior to initialization; " + 215 "attempted to call method '" + options + "'" ); 216 return; 217 } 218 if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { 219 logError( "no such method '" + options + "' for cbpFWSlider instance" ); 220 return; 221 } 222 instance[ options ].apply( instance, args ); 223 }); 224 } 225 else { 226 this.each(function() { 227 var instance = $.data( this, 'cbpFWSlider' ); 228 if ( instance ) { 229 instance._init(); 230 } 231 else { 232 instance = $.data( this, 'cbpFWSlider', new $.CBPFWSlider( options, this ) ); 233 } 234 }); 235 } 236 return this; 237 }; 238 239 240 241 $('document').ready(function(){ 242 // init slider 243 $('#cbp-fwslider').cbpFWSlider(); 244 245 /**
246 Set a 3 seconds interval 247 if next button is visible (so is not the last slide) click next button 248 else it finds first dot and click it to start from the 1st slide 249 **/ 250 setInterval( function(){ 251 if($('.cbp-fwdots').find('span:last').hasClass('cbp-fwcurrent')){ 252 $('.cbp-fwdots').find('span:first-child').click(); 253 }else{ $('.cbp-fwnext').click();}} ,7000 );}); 254 255 256 257 258 259 260 261 262 263 264} )( 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.