bxSlider——一个精悍的拥有一大波焦点图轮播滑动特效的Js程序

打开这个地址>>强大的支持手机端响应式的jQuery焦点图轮播特效插件bxslider.js(右键查看源代码)

************************************************************************************************

只要根据项目实际需求自行调整和搭配参数即可实现各种效果，下面贴上基础示例程序：

Html:

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  6 <script type="text/javascript" src="js/jquery.bxslider.js"></script>
  7 <title>强大的支持手机端响应式的jQuery焦点图轮播特效插件bxslider.js</title>
  8 <link href="css/jquery.bxslider.css" rel="stylesheet" type="text/css">
  9 <style>
 10     p{ width:100%; height:40px; font-size:20px; color:#333; line-height:40px; text-align:center; font-family:"微软雅黑"}
 11 </style>
 12 </head>
 13 
 14 <body>
 15     <!-- ---------------------------------slider1--------------------------------------------- -->
 16     <p>slider1(maxSlides)</p>
 17     <div class="slider1">
 18       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
 19       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
 20       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
 21       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
 22       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
 23       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
 24       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
 25       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
 26       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div> 
 27     </div>
 28     <script type="text/javascript">
 29         $(document).ready(function(){
 30           $('.slider1').bxSlider({
 31             slideWidth: 200,
 32             minSlides: 2,
 33             maxSlides: 3,
 34             slideMargin: 10
 35           });
 36         });
 37     </script>
 38     
 39      <!-- ---------------------------------slider2--------------------------------------------- -->
 40     <p>slider2(slideWidth auto)</p>
 41     <div class="slider2">
 42       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
 43       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
 44       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
 45       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
 46       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
 47       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
 48       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
 49       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
 50       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div> 
 51       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div> 
 52     </div>
 53     <script type="text/javascript">
 54         $(document).ready(function(){
 55           $('.slider2').bxSlider({
 56             slideWidth: 300, 
 57             auto: true,
 58               autoControls: true,
 59             minSlides: 2,
 60             maxSlides: 2,
 61             slideMargin: 10
 62           });
 63         });
 64     </script>
 65     
 66      <!-- ---------------------------------slider3--------------------------------------------- -->
 67     <p>slider3(moveSlides)</p>
 68     <div class="slider3">
 69       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
 70       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
 71       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
 72       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
 73       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
 74       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
 75       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
 76       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
 77       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div> 
 78       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div> 
 79     </div>
 80     <script type="text/javascript">
 81         $(document).ready(function(){
 82           $('.slider3').bxSlider({
 83             slideWidth: 200,
 84             minSlides: 2,
 85             maxSlides: 3,
 86             moveSlides: 1,
 87             slideMargin: 10
 88           });
 89         });
 90     </script>
 91     
 92    
 93     
 94      <!-- ---------------------------------slider4--------------------------------------------- -->
 95     <p>slider4(startSlide)</p>
 96     <div class="slider4">
 97       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
 98       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
 99       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
100       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
101       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
102       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
103       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
104       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
105       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div> 
106       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div> 
107     </div>
108     <script type="text/javascript">
109         $(document).ready(function(){
110           $('.slider4').bxSlider({
111             slideWidth: 200,
112             minSlides: 2,
113             maxSlides: 3,
114             moveSlides: 1,
115             startSlide: 1,
116             slideMargin: 10
117           });
118         });
119     </script>
120     
121    
122     
123      <!-- ---------------------------------slider5--------------------------------------------- -->
124     <p>slider5(Vertical)</p>
125     <div class="slider5">
126       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
127       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
128       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
129       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
130       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
131       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
132       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
133       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
134       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div> 
135       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div> 
136     </div>
137     <script type="text/javascript">
138         $(document).ready(function(){
139           $('.slider5').bxSlider({
140             mode: 'vertical',
141             slideWidth: 200,
142             minSlides: 2,
143             slideMargin: 10
144           });
145         });
146     </script>
147     
148     
149     
150      <!-- ---------------------------------slider6--------------------------------------------- -->
151     <p>slider6(Image)</p>
152     <div class="slider6">
153       <div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>
154       <div class="slide"><img src="http://placehold.it/600x200&text=FooBar2"></div>
155       <div class="slide"><img src="http://placehold.it/600x200&text=FooBar3"></div>
156       <div class="slide"><img src="http://placehold.it/600x200&text=FooBar4"></div> 
157     </div>
158     <script type="text/javascript">
159         $(document).ready(function(){
160           $('.slider6').bxSlider({
161             mode: 'fade',
162             slideWidth: 600, 
163             slideMargin: 10
164           });
165         });
166     </script>
167     
168    
169     
170      <!-- ---------------------------------slider7--------------------------------------------- -->
171     <p>slider7(infiniteLoop hideControlOnEnd)</p>
172     <div class="slider7">
173       <div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>
174       <div class="slide"><img src="http://placehold.it/600x200&text=FooBar2"></div>
175       <div class="slide"><img src="http://placehold.it/600x200&text=FooBar3"></div>
176       <div class="slide"><img src="http://placehold.it/600x200&text=FooBar4"></div> 
177     </div>
178     <script type="text/javascript">
179         $(document).ready(function(){
180           $('.slider7').bxSlider({ 
181             slideWidth: 600, 
182             infiniteLoop: false,
183             hideControlOnEnd: true,
184             slideMargin: 10
185           });
186         });
187     </script>
188     
189    
190     
191      <!-- ---------------------------------slider8--------------------------------------------- -->
192     <p>slider8(adaptiveHeight)</p>
193     <div class="slider8">
194       <div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>
195       <div class="slide"><img src="http://placehold.it/600x300&text=FooBar2"></div>
196       <div class="slide"><img src="http://placehold.it/600x150&text=FooBar3"></div>
197       <div class="slide"><img src="http://placehold.it/600x250&text=FooBar4"></div> 
198     </div>
199     <script type="text/javascript">
200         $(document).ready(function(){
201           $('.slider8').bxSlider({ 
202             slideWidth: 600, 
203             adaptiveHeight: true,
204             startSlides: 0, 
205             slideMargin: 10
206           });
207         });
208     </script>
209     
210    
211     
212      <!-- ---------------------------------slider9--------------------------------------------- -->
213     <p>slider9(ticker)</p>
214     <div class="slider9"> 
215       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
216       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
217       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
218       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
219       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
220       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
221       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
222       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
223       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div> 
224       <div class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
225     </div>
226     <script type="text/javascript">
227         $(document).ready(function(){
228           $('.slider9').bxSlider({ 
229             slideWidth: 200,
230             minSlides: 3,
231             maxSlides: 3,
232             ticker: true,
233             speed: 12000,
234             startSlides: 0, 
235             slideMargin: 10
236           });
237         });
238     </script>    
239 </body>
240 </html>

Css:

  1 /**
  2  * BxSlider v4.1.2 - Fully loaded, responsive content slider
  3  * http://bxslider.com
  4  *
  5  * Written by: Steven Wanderski, 2014
  6  * http://stevenwanderski.com
  7  * (while drinking Belgian ales and listening to jazz)
  8  *
  9  * CEO and founder of bxCreative, LTD
 10  * http://bxcreative.com
 11  */
 12 
 13 
 14 /** RESET AND LAYOUT
 15 ===================================*/
 16 
 17 .bx-wrapper {
 18     position: relative;
 19     margin: 0 auto 60px;
 20     padding: 0;
 21     *zoom: 1;
 22 }
 23 
 24 .bx-wrapper img {
 25     max-width: 100%;
 26     display: block;
 27 }
 28 
 29 /** THEME
 30 ===================================*/
 31 
 32 .bx-wrapper .bx-viewport {
 33     -moz-box-shadow: 0 0 5px #ccc;
 34     -webkit-box-shadow: 0 0 5px #ccc;
 35     box-shadow: 0 0 5px #ccc;
 36     border:  5px solid #fff;
 37     left: -5px;
 38     background: #fff;
 39     
 40     /*fix other elements on the page moving (on Chrome)*/
 41     -webkit-transform: translatez(0);
 42     -moz-transform: translatez(0);
 43         -ms-transform: translatez(0);
 44         -o-transform: translatez(0);
 45         transform: translatez(0);
 46 }
 47 
 48 .bx-wrapper .bx-pager,
 49 .bx-wrapper .bx-controls-auto {
 50     position: absolute;
 51     bottom: -30px;
 52     width: 100%;
 53 }
 54 
 55 /* LOADER */
 56 
 57 .bx-wrapper .bx-loading {
 58     min-height: 50px;
 59     background: url(../images/bx_loader.gif) center center no-repeat #fff;
 60     height: 100%;
 61     width: 100%;
 62     position: absolute;
 63     top: 0;
 64     left: 0;
 65     z-index: 2000;
 66 }
 67 
 68 /* PAGER */
 69 
 70 .bx-wrapper .bx-pager {
 71     text-align: center;
 72     font-size: .85em;
 73     font-family: Arial;
 74     font-weight: bold;
 75     color: #666;
 76     padding-top: 20px;
 77 }
 78 
 79 .bx-wrapper .bx-pager .bx-pager-item,
 80 .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
 81     display: inline-block;
 82     *zoom: 1;
 83     *display: inline;
 84 }
 85 
 86 .bx-wrapper .bx-pager.bx-default-pager a {
 87     background: #666;
 88     text-indent: -9999px;
 89     display: block;
 90     width: 10px;
 91     height: 10px;
 92     margin: 0 5px;
 93     outline: 0;
 94     -moz-border-radius: 5px;
 95     -webkit-border-radius: 5px;
 96     border-radius: 5px;
 97 }
 98 
 99 .bx-wrapper .bx-pager.bx-default-pager a:hover,
100 .bx-wrapper .bx-pager.bx-default-pager a.active {
101     background: #000;
102 }
103 
104 /* DIRECTION CONTROLS (NEXT / PREV) */
105 
106 .bx-wrapper .bx-prev {
107     left: 10px;
108     background: url(../images/controls.png) no-repeat 0 -32px;
109 }
110 
111 .bx-wrapper .bx-next {
112     right: 10px;
113     background: url(../images/controls.png) no-repeat -43px -32px;
114 }
115 
116 .bx-wrapper .bx-prev:hover {
117     background-position: 0 0;
118 }
119 
120 .bx-wrapper .bx-next:hover {
121     background-position: -43px 0;
122 }
123 
124 .bx-wrapper .bx-controls-direction a {
125     position: absolute;
126     top: 50%;
127     margin-top: -16px;
128     outline: 0;
129     width: 32px;
130     height: 32px;
131     text-indent: -9999px;
132     z-index: 9999;
133 }
134 
135 .bx-wrapper .bx-controls-direction a.disabled {
136     display: none;
137 }
138 
139 /* AUTO CONTROLS (START / STOP) */
140 
141 .bx-wrapper .bx-controls-auto {
142     text-align: center;
143 }
144 
145 .bx-wrapper .bx-controls-auto .bx-start {
146     display: block;
147     text-indent: -9999px;
148     width: 10px;
149     height: 11px;
150     outline: 0;
151     background: url(../images/controls.png) -86px -11px no-repeat;
152     margin: 0 3px;
153 }
154 
155 .bx-wrapper .bx-controls-auto .bx-start:hover,
156 .bx-wrapper .bx-controls-auto .bx-start.active {
157     background-position: -86px 0;
158 }
159 
160 .bx-wrapper .bx-controls-auto .bx-stop {
161     display: block;
162     text-indent: -9999px;
163     width: 9px;
164     height: 11px;
165     outline: 0;
166     background: url(../images/controls.png) -86px -44px no-repeat;
167     margin: 0 3px;
168 }
169 
170 .bx-wrapper .bx-controls-auto .bx-stop:hover,
171 .bx-wrapper .bx-controls-auto .bx-stop.active {
172     background-position: -86px -33px;
173 }
174 
175 /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
176 
177 .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
178     text-align: left;
179     width: 80%;
180 }
181 
182 .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
183     right: 0;
184     width: 35px;
185 }
186 
187 /* IMAGE CAPTIONS */
188 
189 .bx-wrapper .bx-caption {
190     position: absolute;
191     bottom: 0;
192     left: 0;
193     background: #6669;
194     background: rgba(80, 80, 80, 0.75);
195     width: 100%;
196 }
197 
198 .bx-wrapper .bx-caption span {
199     color: #fff;
200     font-family: Arial;
201     display: block;
202     font-size: .85em;
203     padding: 10px;
204 }

Js:

   1 /**
   2  * BxSlider v4.1.2 - Fully loaded, responsive content slider
   3  * http://bxslider.com
   4  *
   5  * Copyright 2014, Steven Wanderski - http://stevenwanderski.com - http://bxcreative.com
   6  * Written while drinking Belgian ales and listening to jazz
   7  *
   8  * Released under the MIT license - http://opensource.org/licenses/MIT
   9  */
  10 
  11 ;(function($){
  12 
  13     var plugin = {};
  14 
  15     var defaults = {
  16 
  17         // GENERAL
  18         mode: 'horizontal',
  19         slideSelector: '',
  20         infiniteLoop: true,
  21         hideControlOnEnd: false,
  22         speed: 500,
  23         easing: null,
  24         slideMargin: 0,
  25         startSlide: 0,
  26         randomStart: false,
  27         captions: false,
  28         ticker: false,
  29         tickerHover: false,
  30         adaptiveHeight: false,
  31         adaptiveHeightSpeed: 500,
  32         video: false,
  33         useCSS: true,
  34         preloadImages: 'visible',
  35         responsive: true,
  36         slideZIndex: 50,
  37         wrapperClass: 'bx-wrapper',
  38 
  39         // TOUCH
  40         touchEnabled: true,
  41         swipeThreshold: 50,
  42         oneToOneTouch: true,
  43         preventDefaultSwipeX: true,
  44         preventDefaultSwipeY: false,
  45 
  46         // PAGER
  47         pager: true,
  48         pagerType: 'full',
  49         pagerShortSeparator: ' / ',
  50         pagerSelector: null,
  51         buildPager: null,
  52         pagerCustom: null,
  53 
  54         // CONTROLS
  55         controls: true,
  56         nextText: 'Next',
  57         prevText: 'Prev',
  58         nextSelector: null,
  59         prevSelector: null,
  60         autoControls: false,
  61         startText: 'Start',
  62         stopText: 'Stop',
  63         autoControlsCombine: false,
  64         autoControlsSelector: null,
  65 
  66         // AUTO
  67         auto: false,
  68         pause: 4000,
  69         autoStart: true,
  70         autoDirection: 'next',
  71         autoHover: false,
  72         autoDelay: 0,
  73         autoSlideForOnePage: false,
  74 
  75         // CAROUSEL
  76         minSlides: 1,
  77         maxSlides: 1,
  78         moveSlides: 0,
  79         slideWidth: 0,
  80 
  81         // CALLBACKS
  82         onSliderLoad: function() {},
  83         onSlideBefore: function() {},
  84         onSlideAfter: function() {},
  85         onSlideNext: function() {},
  86         onSlidePrev: function() {},
  87         onSliderResize: function() {}
  88     }
  89 
  90     $.fn.bxSlider = function(options){
  91 
  92         if(this.length == 0) return this;
  93 
  94         // support mutltiple elements
  95         if(this.length > 1){
  96             this.each(function(){$(this).bxSlider(options)});
  97             return this;
  98         }
  99 
 100         // create a namespace to be used throughout the plugin
 101         var slider = {};
 102         // set a reference to our slider element
 103         var el = this;
 104         plugin.el = this;
 105 
 106         /**
 107          * Makes slideshow responsive
 108          */
 109         // first get the original window dimens (thanks alot IE)
 110         var windowWidth = $(window).width();
 111         var windowHeight = $(window).height();
 112 
 113 
 114 
 115         /**
 116          * ===================================================================================
 117          * = PRIVATE FUNCTIONS
 118          * ===================================================================================
 119          */
 120 
 121         /**
 122          * Initializes namespace settings to be used throughout plugin
 123          */
 124         var init = function(){
 125             // merge user-supplied options with the defaults
 126             slider.settings = $.extend({}, defaults, options);
 127             // parse slideWidth setting
 128             slider.settings.slideWidth = parseInt(slider.settings.slideWidth);
 129             // store the original children
 130             slider.children = el.children(slider.settings.slideSelector);
 131             // check if actual number of slides is less than minSlides / maxSlides
 132             if(slider.children.length < slider.settings.minSlides) slider.settings.minSlides = slider.children.length;
 133             if(slider.children.length < slider.settings.maxSlides) slider.settings.maxSlides = slider.children.length;
 134             // if random start, set the startSlide setting to random number
 135             if(slider.settings.randomStart) slider.settings.startSlide = Math.floor(Math.random() * slider.children.length);
 136             // store active slide information
 137             slider.active = { index: slider.settings.startSlide }
 138             // store if the slider is in carousel mode (displaying / moving multiple slides)
 139             slider.carousel = slider.settings.minSlides > 1 || slider.settings.maxSlides > 1;
 140             // if carousel, force preloadImages = 'all'
 141             if(slider.carousel) slider.settings.preloadImages = 'all';
 142             // calculate the min / max width thresholds based on min / max number of slides
 143             // used to setup and update carousel slides dimensions
 144             slider.minThreshold = (slider.settings.minSlides * slider.settings.slideWidth) + ((slider.settings.minSlides - 1) * slider.settings.slideMargin);
 145             slider.maxThreshold = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
 146             // store the current state of the slider (if currently animating, working is true)
 147             slider.working = false;
 148             // initialize the controls object
 149             slider.controls = {};
 150             // initialize an auto interval
 151             slider.interval = null;
 152             // determine which property to use for transitions
 153             slider.animProp = slider.settings.mode == 'vertical' ? 'top' : 'left';
 154             // determine if hardware acceleration can be used
 155             slider.usingCSS = slider.settings.useCSS && slider.settings.mode != 'fade' && (function(){
 156                 // create our test div element
 157                 var div = document.createElement('div');
 158                 // css transition properties
 159                 var props = ['WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
 160                 // test for each property
 161                 for(var i in props){
 162                     if(div.style[props[i]] !== undefined){
 163                         slider.cssPrefix = props[i].replace('Perspective', '').toLowerCase();
 164                         slider.animProp = '-' + slider.cssPrefix + '-transform';
 165                         return true;
 166                     }
 167                 }
 168                 return false;
 169             }());
 170             // if vertical mode always make maxSlides and minSlides equal
 171             if(slider.settings.mode == 'vertical') slider.settings.maxSlides = slider.settings.minSlides;
 172             // save original style data
 173             el.data("origStyle", el.attr("style"));
 174             el.children(slider.settings.slideSelector).each(function() {
 175               $(this).data("origStyle", $(this).attr("style"));
 176             });
 177             // perform all DOM / CSS modifications
 178             setup();
 179         }
 180 
 181         /**
 182          * Performs all DOM and CSS modifications
 183          */
 184         var setup = function(){
 185             // wrap el in a wrapper
 186             el.wrap('<div class="' + slider.settings.wrapperClass + '"><div class="bx-viewport"></div></div>');
 187             // store a namspace reference to .bx-viewport
 188             slider.viewport = el.parent();
 189             // add a loading div to display while images are loading
 190             slider.loader = $('<div class="bx-loading" />');
 191             slider.viewport.prepend(slider.loader);
 192             // set el to a massive width, to hold any needed slides
 193             // also strip any margin and padding from el
 194             el.css({
 195                  slider.settings.mode == 'horizontal' ? (slider.children.length * 100 + 215) + '%' : 'auto',
 196                 position: 'relative'
 197             });
 198             // if using CSS, add the easing property
 199             if(slider.usingCSS && slider.settings.easing){
 200                 el.css('-' + slider.cssPrefix + '-transition-timing-function', slider.settings.easing);
 201             // if not using CSS and no easing value was supplied, use the default JS animation easing (swing)
 202             }else if(!slider.settings.easing){
 203                 slider.settings.easing = 'swing';
 204             }
 205             var slidesShowing = getNumberSlidesShowing();
 206             // make modifications to the viewport (.bx-viewport)
 207             slider.viewport.css({
 208                  '100%',
 209                 overflow: 'hidden',
 210                 position: 'relative'
 211             });
 212             slider.viewport.parent().css({
 213                 maxWidth: getViewportMaxWidth()
 214             });
 215             // make modification to the wrapper (.bx-wrapper)
 216             if(!slider.settings.pager) {
 217                 slider.viewport.parent().css({
 218                 margin: '0 auto 0px'
 219                 });
 220             }
 221             // apply css to all slider children
 222             slider.children.css({
 223                 'float': slider.settings.mode == 'horizontal' ? 'left' : 'none',
 224                 listStyle: 'none',
 225                 position: 'relative'
 226             });
 227             // apply the calculated width after the float is applied to prevent scrollbar interference
 228             slider.children.css('width', getSlideWidth());
 229             // if slideMargin is supplied, add the css
 230             if(slider.settings.mode == 'horizontal' && slider.settings.slideMargin > 0) slider.children.css('marginRight', slider.settings.slideMargin);
 231             if(slider.settings.mode == 'vertical' && slider.settings.slideMargin > 0) slider.children.css('marginBottom', slider.settings.slideMargin);
 232             // if "fade" mode, add positioning and z-index CSS
 233             if(slider.settings.mode == 'fade'){
 234                 slider.children.css({
 235                     position: 'absolute',
 236                     zIndex: 0,
 237                     display: 'none'
 238                 });
 239                 // prepare the z-index on the showing element
 240                 slider.children.eq(slider.settings.startSlide).css({zIndex: slider.settings.slideZIndex, display: 'block'});
 241             }
 242             // create an element to contain all slider controls (pager, start / stop, etc)
 243             slider.controls.el = $('<div class="bx-controls" />');
 244             // if captions are requested, add them
 245             if(slider.settings.captions) appendCaptions();
 246             // check if startSlide is last slide
 247             slider.active.last = slider.settings.startSlide == getPagerQty() - 1;
 248             // if video is true, set up the fitVids plugin
 249             if(slider.settings.video) el.fitVids();
 250             // set the default preload selector (visible)
 251             var preloadSelector = slider.children.eq(slider.settings.startSlide);
 252             if (slider.settings.preloadImages == "all") preloadSelector = slider.children;
 253             // only check for control addition if not in "ticker" mode
 254             if(!slider.settings.ticker){
 255                 // if pager is requested, add it
 256                 if(slider.settings.pager) appendPager();
 257                 // if controls are requested, add them
 258                 if(slider.settings.controls) appendControls();
 259                 // if auto is true, and auto controls are requested, add them
 260                 if(slider.settings.auto && slider.settings.autoControls) appendControlsAuto();
 261                 // if any control option is requested, add the controls wrapper
 262                 if(slider.settings.controls || slider.settings.autoControls || slider.settings.pager) slider.viewport.after(slider.controls.el);
 263             // if ticker mode, do not allow a pager
 264             }else{
 265                 slider.settings.pager = false;
 266             }
 267             // preload all images, then perform final DOM / CSS modifications that depend on images being loaded
 268             loadElements(preloadSelector, start);
 269         }
 270 
 271         var loadElements = function(selector, callback){
 272             var total = selector.find('img, iframe').length;
 273             if (total == 0){
 274                 callback();
 275                 return;
 276             }
 277             var count = 0;
 278             selector.find('img, iframe').each(function(){
 279                 $(this).one('load', function() {
 280                   if(++count == total) callback();
 281                 }).each(function() {
 282                   if(this.complete) $(this).load();
 283                 });
 284             });
 285         }
 286 
 287         /**
 288          * Start the slider
 289          */
 290         var start = function(){
 291             // if infinite loop, prepare additional slides
 292             if(slider.settings.infiniteLoop && slider.settings.mode != 'fade' && !slider.settings.ticker){
 293                 var slice = slider.settings.mode == 'vertical' ? slider.settings.minSlides : slider.settings.maxSlides;
 294                 var sliceAppend = slider.children.slice(0, slice).clone().addClass('bx-clone');
 295                 var slicePrepend = slider.children.slice(-slice).clone().addClass('bx-clone');
 296                 el.append(sliceAppend).prepend(slicePrepend);
 297             }
 298             // remove the loading DOM element
 299             slider.loader.remove();
 300             // set the left / top position of "el"
 301             setSlidePosition();
 302             // if "vertical" mode, always use adaptiveHeight to prevent odd behavior
 303             if (slider.settings.mode == 'vertical') slider.settings.adaptiveHeight = true;
 304             // set the viewport height
 305             slider.viewport.height(getViewportHeight());
 306             // make sure everything is positioned just right (same as a window resize)
 307             el.redrawSlider();
 308             // onSliderLoad callback
 309             slider.settings.onSliderLoad(slider.active.index);
 310             // slider has been fully initialized
 311             slider.initialized = true;
 312             // bind the resize call to the window
 313             if (slider.settings.responsive) $(window).bind('resize', resizeWindow);
 314             // if auto is true and has more than 1 page, start the show
 315             if (slider.settings.auto && slider.settings.autoStart && (getPagerQty() > 1 || slider.settings.autoSlideForOnePage)) initAuto();
 316             // if ticker is true, start the ticker
 317             if (slider.settings.ticker) initTicker();
 318             // if pager is requested, make the appropriate pager link active
 319             if (slider.settings.pager) updatePagerActive(slider.settings.startSlide);
 320             // check for any updates to the controls (like hideControlOnEnd updates)
 321             if (slider.settings.controls) updateDirectionControls();
 322             // if touchEnabled is true, setup the touch events
 323             if (slider.settings.touchEnabled && !slider.settings.ticker) initTouch();
 324         }
 325 
 326         /**
 327          * Returns the calculated height of the viewport, used to determine either adaptiveHeight or the maxHeight value
 328          */
 329         var getViewportHeight = function(){
 330             var height = 0;
 331             // first determine which children (slides) should be used in our height calculation
 332             var children = $();
 333             // if mode is not "vertical" and adaptiveHeight is false, include all children
 334             if(slider.settings.mode != 'vertical' && !slider.settings.adaptiveHeight){
 335                 children = slider.children;
 336             }else{
 337                 // if not carousel, return the single active child
 338                 if(!slider.carousel){
 339                     children = slider.children.eq(slider.active.index);
 340                 // if carousel, return a slice of children
 341                 }else{
 342                     // get the individual slide index
 343                     var currentIndex = slider.settings.moveSlides == 1 ? slider.active.index : slider.active.index * getMoveBy();
 344                     // add the current slide to the children
 345                     children = slider.children.eq(currentIndex);
 346                     // cycle through the remaining "showing" slides
 347                     for (i = 1; i <= slider.settings.maxSlides - 1; i++){
 348                         // if looped back to the start
 349                         if(currentIndex + i >= slider.children.length){
 350                             children = children.add(slider.children.eq(i - 1));
 351                         }else{
 352                             children = children.add(slider.children.eq(currentIndex + i));
 353                         }
 354                     }
 355                 }
 356             }
 357             // if "vertical" mode, calculate the sum of the heights of the children
 358             if(slider.settings.mode == 'vertical'){
 359                 children.each(function(index) {
 360                   height += $(this).outerHeight();
 361                 });
 362                 // add user-supplied margins
 363                 if(slider.settings.slideMargin > 0){
 364                     height += slider.settings.slideMargin * (slider.settings.minSlides - 1);
 365                 }
 366             // if not "vertical" mode, calculate the max height of the children
 367             }else{
 368                 height = Math.max.apply(Math, children.map(function(){
 369                     return $(this).outerHeight(false);
 370                 }).get());
 371             }
 372 
 373             if(slider.viewport.css('box-sizing') == 'border-box'){
 374                 height +=    parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom')) +
 375                             parseFloat(slider.viewport.css('border-top-width')) + parseFloat(slider.viewport.css('border-bottom-width'));
 376             }else if(slider.viewport.css('box-sizing') == 'padding-box'){
 377                 height +=    parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom'));
 378             }
 379 
 380             return height;
 381         }
 382 
 383         /**
 384          * Returns the calculated width to be used for the outer wrapper / viewport
 385          */
 386         var getViewportMaxWidth = function(){
 387             var width = '100%';
 388             if(slider.settings.slideWidth > 0){
 389                 if(slider.settings.mode == 'horizontal'){
 390                     width = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
 391                 }else{
 392                     width = slider.settings.slideWidth;
 393                 }
 394             }
 395             return width;
 396         }
 397 
 398         /**
 399          * Returns the calculated width to be applied to each slide
 400          */
 401         var getSlideWidth = function(){
 402             // start with any user-supplied slide width
 403             var newElWidth = slider.settings.slideWidth;
 404             // get the current viewport width
 405             var wrapWidth = slider.viewport.width();
 406             // if slide width was not supplied, or is larger than the viewport use the viewport width
 407             if(slider.settings.slideWidth == 0 ||
 408                 (slider.settings.slideWidth > wrapWidth && !slider.carousel) ||
 409                 slider.settings.mode == 'vertical'){
 410                 newElWidth = wrapWidth;
 411             // if carousel, use the thresholds to determine the width
 412             }else if(slider.settings.maxSlides > 1 && slider.settings.mode == 'horizontal'){
 413                 if(wrapWidth > slider.maxThreshold){
 414                     // newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.maxSlides - 1))) / slider.settings.maxSlides;
 415                 }else if(wrapWidth < slider.minThreshold){
 416                     newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.minSlides - 1))) / slider.settings.minSlides;
 417                 }
 418             }
 419             return newElWidth;
 420         }
 421 
 422         /**
 423          * Returns the number of slides currently visible in the viewport (includes partially visible slides)
 424          */
 425         var getNumberSlidesShowing = function(){
 426             var slidesShowing = 1;
 427             if(slider.settings.mode == 'horizontal' && slider.settings.slideWidth > 0){
 428                 // if viewport is smaller than minThreshold, return minSlides
 429                 if(slider.viewport.width() < slider.minThreshold){
 430                     slidesShowing = slider.settings.minSlides;
 431                 // if viewport is larger than minThreshold, return maxSlides
 432                 }else if(slider.viewport.width() > slider.maxThreshold){
 433                     slidesShowing = slider.settings.maxSlides;
 434                 // if viewport is between min / max thresholds, divide viewport width by first child width
 435                 }else{
 436                     var childWidth = slider.children.first().width() + slider.settings.slideMargin;
 437                     slidesShowing = Math.floor((slider.viewport.width() +
 438                         slider.settings.slideMargin) / childWidth);
 439                 }
 440             // if "vertical" mode, slides showing will always be minSlides
 441             }else if(slider.settings.mode == 'vertical'){
 442                 slidesShowing = slider.settings.minSlides;
 443             }
 444             return slidesShowing;
 445         }
 446 
 447         /**
 448          * Returns the number of pages (one full viewport of slides is one "page")
 449          */
 450         var getPagerQty = function(){
 451             var pagerQty = 0;
 452             // if moveSlides is specified by the user
 453             if(slider.settings.moveSlides > 0){
 454                 if(slider.settings.infiniteLoop){
 455                     pagerQty = Math.ceil(slider.children.length / getMoveBy());
 456                 }else{
 457                     // use a while loop to determine pages
 458                     var breakPoint = 0;
 459                     var counter = 0
 460                     // when breakpoint goes above children length, counter is the number of pages
 461                     while (breakPoint < slider.children.length){
 462                         ++pagerQty;
 463                         breakPoint = counter + getNumberSlidesShowing();
 464                         counter += slider.settings.moveSlides <= getNumberSlidesShowing() ? slider.settings.moveSlides : getNumberSlidesShowing();
 465                     }
 466                 }
 467             // if moveSlides is 0 (auto) divide children length by sides showing, then round up
 468             }else{
 469                 pagerQty = Math.ceil(slider.children.length / getNumberSlidesShowing());
 470             }
 471             return pagerQty;
 472         }
 473 
 474         /**
 475          * Returns the number of indivual slides by which to shift the slider
 476          */
 477         var getMoveBy = function(){
 478             // if moveSlides was set by the user and moveSlides is less than number of slides showing
 479             if(slider.settings.moveSlides > 0 && slider.settings.moveSlides <= getNumberSlidesShowing()){
 480                 return slider.settings.moveSlides;
 481             }
 482             // if moveSlides is 0 (auto)
 483             return getNumberSlidesShowing();
 484         }
 485 
 486         /**
 487          * Sets the slider's (el) left or top position
 488          */
 489         var setSlidePosition = function(){
 490             // if last slide, not infinite loop, and number of children is larger than specified maxSlides
 491             if(slider.children.length > slider.settings.maxSlides && slider.active.last && !slider.settings.infiniteLoop){
 492                 if (slider.settings.mode == 'horizontal'){
 493                     // get the last child's position
 494                     var lastChild = slider.children.last();
 495                     var position = lastChild.position();
 496                     // set the left position
 497                     setPositionProperty(-(position.left - (slider.viewport.width() - lastChild.outerWidth())), 'reset', 0);
 498                 }else if(slider.settings.mode == 'vertical'){
 499                     // get the last showing index's position
 500                     var lastShowingIndex = slider.children.length - slider.settings.minSlides;
 501                     var position = slider.children.eq(lastShowingIndex).position();
 502                     // set the top position
 503                     setPositionProperty(-position.top, 'reset', 0);
 504                 }
 505             // if not last slide
 506             }else{
 507                 // get the position of the first showing slide
 508                 var position = slider.children.eq(slider.active.index * getMoveBy()).position();
 509                 // check for last slide
 510                 if (slider.active.index == getPagerQty() - 1) slider.active.last = true;
 511                 // set the repective position
 512                 if (position != undefined){
 513                     if (slider.settings.mode == 'horizontal') setPositionProperty(-position.left, 'reset', 0);
 514                     else if (slider.settings.mode == 'vertical') setPositionProperty(-position.top, 'reset', 0);
 515                 }
 516             }
 517         }
 518 
 519         /**
 520          * Sets the el's animating property position (which in turn will sometimes animate el).
 521          * If using CSS, sets the transform property. If not using CSS, sets the top / left property.
 522          *
 523          * @param value (int)
 524          *  - the animating property's value
 525          *
 526          * @param type (string) 'slider', 'reset', 'ticker'
 527          *  - the type of instance for which the function is being
 528          *
 529          * @param duration (int)
 530          *  - the amount of time (in ms) the transition should occupy
 531          *
 532          * @param params (array) optional
 533          *  - an optional parameter containing any variables that need to be passed in
 534          */
 535         var setPositionProperty = function(value, type, duration, params){
 536             // use CSS transform
 537             if(slider.usingCSS){
 538                 // determine the translate3d value
 539                 var propValue = slider.settings.mode == 'vertical' ? 'translate3d(0, ' + value + 'px, 0)' : 'translate3d(' + value + 'px, 0, 0)';
 540                 // add the CSS transition-duration
 541                 el.css('-' + slider.cssPrefix + '-transition-duration', duration / 1000 + 's');
 542                 if(type == 'slide'){
 543                     // set the property value
 544                     el.css(slider.animProp, propValue);
 545                     // bind a callback method - executes when CSS transition completes
 546                     el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
 547                         // unbind the callback
 548                         el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
 549                         updateAfterSlideTransition();
 550                     });
 551                 }else if(type == 'reset'){
 552                     el.css(slider.animProp, propValue);
 553                 }else if(type == 'ticker'){
 554                     // make the transition use 'linear'
 555                     el.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear');
 556                     el.css(slider.animProp, propValue);
 557                     // bind a callback method - executes when CSS transition completes
 558                     el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
 559                         // unbind the callback
 560                         el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
 561                         // reset the position
 562                         setPositionProperty(params['resetValue'], 'reset', 0);
 563                         // start the loop again
 564                         tickerLoop();
 565                     });
 566                 }
 567             // use JS animate
 568             }else{
 569                 var animateObj = {};
 570                 animateObj[slider.animProp] = value;
 571                 if(type == 'slide'){
 572                     el.animate(animateObj, duration, slider.settings.easing, function(){
 573                         updateAfterSlideTransition();
 574                     });
 575                 }else if(type == 'reset'){
 576                     el.css(slider.animProp, value)
 577                 }else if(type == 'ticker'){
 578                     el.animate(animateObj, speed, 'linear', function(){
 579                         setPositionProperty(params['resetValue'], 'reset', 0);
 580                         // run the recursive loop after animation
 581                         tickerLoop();
 582                     });
 583                 }
 584             }
 585         }
 586 
 587         /**
 588          * Populates the pager with proper amount of pages
 589          */
 590         var populatePager = function(){
 591             var pagerHtml = '';
 592             var pagerQty = getPagerQty();
 593             // loop through each pager item
 594             for(var i=0; i < pagerQty; i++){
 595                 var linkContent = '';
 596                 // if a buildPager function is supplied, use it to get pager link value, else use index + 1
 597                 if(slider.settings.buildPager && $.isFunction(slider.settings.buildPager)){
 598                     linkContent = slider.settings.buildPager(i);
 599                     slider.pagerEl.addClass('bx-custom-pager');
 600                 }else{
 601                     linkContent = i + 1;
 602                     slider.pagerEl.addClass('bx-default-pager');
 603                 }
 604                 // var linkContent = slider.settings.buildPager && $.isFunction(slider.settings.buildPager) ? slider.settings.buildPager(i) : i + 1;
 605                 // add the markup to the string
 606                 pagerHtml += '<div class="bx-pager-item"><a href="" data-slide-index="' + i + '" class="bx-pager-link">' + linkContent + '</a></div>';
 607             };
 608             // populate the pager element with pager links
 609             slider.pagerEl.html(pagerHtml);
 610         }
 611 
 612         /**
 613          * Appends the pager to the controls element
 614          */
 615         var appendPager = function(){
 616             if(!slider.settings.pagerCustom){
 617                 // create the pager DOM element
 618                 slider.pagerEl = $('<div class="bx-pager" />');
 619                 // if a pager selector was supplied, populate it with the pager
 620                 if(slider.settings.pagerSelector){
 621                     $(slider.settings.pagerSelector).html(slider.pagerEl);
 622                 // if no pager selector was supplied, add it after the wrapper
 623                 }else{
 624                     slider.controls.el.addClass('bx-has-pager').append(slider.pagerEl);
 625                 }
 626                 // populate the pager
 627                 populatePager();
 628             }else{
 629                 slider.pagerEl = $(slider.settings.pagerCustom);
 630             }
 631             // assign the pager click binding
 632             slider.pagerEl.on('click', 'a', clickPagerBind);
 633         }
 634 
 635         /**
 636          * Appends prev / next controls to the controls element
 637          */
 638         var appendControls = function(){
 639             slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a>');
 640             slider.controls.prev = $('<a class="bx-prev" href="">' + slider.settings.prevText + '</a>');
 641             // bind click actions to the controls
 642             slider.controls.next.bind('click', clickNextBind);
 643             slider.controls.prev.bind('click', clickPrevBind);
 644             // if nextSlector was supplied, populate it
 645             if(slider.settings.nextSelector){
 646                 $(slider.settings.nextSelector).append(slider.controls.next);
 647             }
 648             // if prevSlector was supplied, populate it
 649             if(slider.settings.prevSelector){
 650                 $(slider.settings.prevSelector).append(slider.controls.prev);
 651             }
 652             // if no custom selectors were supplied
 653             if(!slider.settings.nextSelector && !slider.settings.prevSelector){
 654                 // add the controls to the DOM
 655                 slider.controls.directionEl = $('<div class="bx-controls-direction" />');
 656                 // add the control elements to the directionEl
 657                 slider.controls.directionEl.append(slider.controls.prev).append(slider.controls.next);
 658                 // slider.viewport.append(slider.controls.directionEl);
 659                 slider.controls.el.addClass('bx-has-controls-direction').append(slider.controls.directionEl);
 660             }
 661         }
 662 
 663         /**
 664          * Appends start / stop auto controls to the controls element
 665          */
 666         var appendControlsAuto = function(){
 667             slider.controls.start = $('<div class="bx-controls-auto-item"><a class="bx-start" href="">' + slider.settings.startText + '</a></div>');
 668             slider.controls.stop = $('<div class="bx-controls-auto-item"><a class="bx-stop" href="">' + slider.settings.stopText + '</a></div>');
 669             // add the controls to the DOM
 670             slider.controls.autoEl = $('<div class="bx-controls-auto" />');
 671             // bind click actions to the controls
 672             slider.controls.autoEl.on('click', '.bx-start', clickStartBind);
 673             slider.controls.autoEl.on('click', '.bx-stop', clickStopBind);
 674             // if autoControlsCombine, insert only the "start" control
 675             if(slider.settings.autoControlsCombine){
 676                 slider.controls.autoEl.append(slider.controls.start);
 677             // if autoControlsCombine is false, insert both controls
 678             }else{
 679                 slider.controls.autoEl.append(slider.controls.start).append(slider.controls.stop);
 680             }
 681             // if auto controls selector was supplied, populate it with the controls
 682             if(slider.settings.autoControlsSelector){
 683                 $(slider.settings.autoControlsSelector).html(slider.controls.autoEl);
 684             // if auto controls selector was not supplied, add it after the wrapper
 685             }else{
 686                 slider.controls.el.addClass('bx-has-controls-auto').append(slider.controls.autoEl);
 687             }
 688             // update the auto controls
 689             updateAutoControls(slider.settings.autoStart ? 'stop' : 'start');
 690         }
 691 
 692         /**
 693          * Appends image captions to the DOM
 694          */
 695         var appendCaptions = function(){
 696             // cycle through each child
 697             slider.children.each(function(index){
 698                 // get the image title attribute
 699                 var title = $(this).find('img:first').attr('title');
 700                 // append the caption
 701                 if (title != undefined && ('' + title).length) {
 702                     $(this).append('<div class="bx-caption"><span>' + title + '</span></div>');
 703                 }
 704             });
 705         }
 706 
 707         /**
 708          * Click next binding
 709          *
 710          * @param e (event)
 711          *  - DOM event object
 712          */
 713         var clickNextBind = function(e){
 714             // if auto show is running, stop it
 715             if (slider.settings.auto) el.stopAuto();
 716             el.goToNextSlide();
 717             e.preventDefault();
 718         }
 719 
 720         /**
 721          * Click prev binding
 722          *
 723          * @param e (event)
 724          *  - DOM event object
 725          */
 726         var clickPrevBind = function(e){
 727             // if auto show is running, stop it
 728             if (slider.settings.auto) el.stopAuto();
 729             el.goToPrevSlide();
 730             e.preventDefault();
 731         }
 732 
 733         /**
 734          * Click start binding
 735          *
 736          * @param e (event)
 737          *  - DOM event object
 738          */
 739         var clickStartBind = function(e){
 740             el.startAuto();
 741             e.preventDefault();
 742         }
 743 
 744         /**
 745          * Click stop binding
 746          *
 747          * @param e (event)
 748          *  - DOM event object
 749          */
 750         var clickStopBind = function(e){
 751             el.stopAuto();
 752             e.preventDefault();
 753         }
 754 
 755         /**
 756          * Click pager binding
 757          *
 758          * @param e (event)
 759          *  - DOM event object
 760          */
 761         var clickPagerBind = function(e){
 762             // if auto show is running, stop it
 763             if (slider.settings.auto) el.stopAuto();
 764             var pagerLink = $(e.currentTarget);
 765             if(pagerLink.attr('data-slide-index') !== undefined){
 766                 var pagerIndex = parseInt(pagerLink.attr('data-slide-index'));
 767                 // if clicked pager link is not active, continue with the goToSlide call
 768                 if(pagerIndex != slider.active.index) el.goToSlide(pagerIndex);
 769                 e.preventDefault();
 770             }
 771         }
 772 
 773         /**
 774          * Updates the pager links with an active class
 775          *
 776          * @param slideIndex (int)
 777          *  - index of slide to make active
 778          */
 779         var updatePagerActive = function(slideIndex){
 780             // if "short" pager type
 781             var len = slider.children.length; // nb of children
 782             if(slider.settings.pagerType == 'short'){
 783                 if(slider.settings.maxSlides > 1) {
 784                     len = Math.ceil(slider.children.length/slider.settings.maxSlides);
 785                 }
 786                 slider.pagerEl.html( (slideIndex + 1) + slider.settings.pagerShortSeparator + len);
 787                 return;
 788             }
 789             // remove all pager active classes
 790             slider.pagerEl.find('a').removeClass('active');
 791             // apply the active class for all pagers
 792             slider.pagerEl.each(function(i, el) { $(el).find('a').eq(slideIndex).addClass('active'); });
 793         }
 794 
 795         /**
 796          * Performs needed actions after a slide transition
 797          */
 798         var updateAfterSlideTransition = function(){
 799             // if infinte loop is true
 800             if(slider.settings.infiniteLoop){
 801                 var position = '';
 802                 // first slide
 803                 if(slider.active.index == 0){
 804                     // set the new position
 805                     position = slider.children.eq(0).position();
 806                 // carousel, last slide
 807                 }else if(slider.active.index == getPagerQty() - 1 && slider.carousel){
 808                     position = slider.children.eq((getPagerQty() - 1) * getMoveBy()).position();
 809                 // last slide
 810                 }else if(slider.active.index == slider.children.length - 1){
 811                     position = slider.children.eq(slider.children.length - 1).position();
 812                 }
 813                 if(position){
 814                     if (slider.settings.mode == 'horizontal') { setPositionProperty(-position.left, 'reset', 0); }
 815                     else if (slider.settings.mode == 'vertical') { setPositionProperty(-position.top, 'reset', 0); }
 816                 }
 817             }
 818             // declare that the transition is complete
 819             slider.working = false;
 820             // onSlideAfter callback
 821             slider.settings.onSlideAfter(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
 822         }
 823 
 824         /**
 825          * Updates the auto controls state (either active, or combined switch)
 826          *
 827          * @param state (string) "start", "stop"
 828          *  - the new state of the auto show
 829          */
 830         var updateAutoControls = function(state){
 831             // if autoControlsCombine is true, replace the current control with the new state
 832             if(slider.settings.autoControlsCombine){
 833                 slider.controls.autoEl.html(slider.controls[state]);
 834             // if autoControlsCombine is false, apply the "active" class to the appropriate control
 835             }else{
 836                 slider.controls.autoEl.find('a').removeClass('active');
 837                 slider.controls.autoEl.find('a:not(.bx-' + state + ')').addClass('active');
 838             }
 839         }
 840 
 841         /**
 842          * Updates the direction controls (checks if either should be hidden)
 843          */
 844         var updateDirectionControls = function(){
 845             if(getPagerQty() == 1){
 846                 slider.controls.prev.addClass('disabled');
 847                 slider.controls.next.addClass('disabled');
 848             }else if(!slider.settings.infiniteLoop && slider.settings.hideControlOnEnd){
 849                 // if first slide
 850                 if (slider.active.index == 0){
 851                     slider.controls.prev.addClass('disabled');
 852                     slider.controls.next.removeClass('disabled');
 853                 // if last slide
 854                 }else if(slider.active.index == getPagerQty() - 1){
 855                     slider.controls.next.addClass('disabled');
 856                     slider.controls.prev.removeClass('disabled');
 857                 // if any slide in the middle
 858                 }else{
 859                     slider.controls.prev.removeClass('disabled');
 860                     slider.controls.next.removeClass('disabled');
 861                 }
 862             }
 863         }
 864 
 865         /**
 866          * Initialzes the auto process
 867          */
 868         var initAuto = function(){
 869             // if autoDelay was supplied, launch the auto show using a setTimeout() call
 870             if(slider.settings.autoDelay > 0){
 871                 var timeout = setTimeout(el.startAuto, slider.settings.autoDelay);
 872             // if autoDelay was not supplied, start the auto show normally
 873             }else{
 874                 el.startAuto();
 875             }
 876             // if autoHover is requested
 877             if(slider.settings.autoHover){
 878                 // on el hover
 879                 el.hover(function(){
 880                     // if the auto show is currently playing (has an active interval)
 881                     if(slider.interval){
 882                         // stop the auto show and pass true agument which will prevent control update
 883                         el.stopAuto(true);
 884                         // create a new autoPaused value which will be used by the relative "mouseout" event
 885                         slider.autoPaused = true;
 886                     }
 887                 }, function(){
 888                     // if the autoPaused value was created be the prior "mouseover" event
 889                     if(slider.autoPaused){
 890                         // start the auto show and pass true agument which will prevent control update
 891                         el.startAuto(true);
 892                         // reset the autoPaused value
 893                         slider.autoPaused = null;
 894                     }
 895                 });
 896             }
 897         }
 898 
 899         /**
 900          * Initialzes the ticker process
 901          */
 902         var initTicker = function(){
 903             var startPosition = 0;
 904             // if autoDirection is "next", append a clone of the entire slider
 905             if(slider.settings.autoDirection == 'next'){
 906                 el.append(slider.children.clone().addClass('bx-clone'));
 907             // if autoDirection is "prev", prepend a clone of the entire slider, and set the left position
 908             }else{
 909                 el.prepend(slider.children.clone().addClass('bx-clone'));
 910                 var position = slider.children.first().position();
 911                 startPosition = slider.settings.mode == 'horizontal' ? -position.left : -position.top;
 912             }
 913             setPositionProperty(startPosition, 'reset', 0);
 914             // do not allow controls in ticker mode
 915             slider.settings.pager = false;
 916             slider.settings.controls = false;
 917             slider.settings.autoControls = false;
 918             // if autoHover is requested
 919             if(slider.settings.tickerHover && !slider.usingCSS){
 920                 // on el hover
 921                 slider.viewport.hover(function(){
 922                     el.stop();
 923                 }, function(){
 924                     // calculate the total width of children (used to calculate the speed ratio)
 925                     var totalDimens = 0;
 926                     slider.children.each(function(index){
 927                       totalDimens += slider.settings.mode == 'horizontal' ? $(this).outerWidth(true) : $(this).outerHeight(true);
 928                     });
 929                     // calculate the speed ratio (used to determine the new speed to finish the paused animation)
 930                     var ratio = slider.settings.speed / totalDimens;
 931                     // determine which property to use
 932                     var property = slider.settings.mode == 'horizontal' ? 'left' : 'top';
 933                     // calculate the new speed
 934                     var newSpeed = ratio * (totalDimens - (Math.abs(parseInt(el.css(property)))));
 935                     tickerLoop(newSpeed);
 936                 });
 937             }
 938             // start the ticker loop
 939             tickerLoop();
 940         }
 941 
 942         /**
 943          * Runs a continuous loop, news ticker-style
 944          */
 945         var tickerLoop = function(resumeSpeed){
 946             speed = resumeSpeed ? resumeSpeed : slider.settings.speed;
 947             var position = {left: 0, top: 0};
 948             var reset = {left: 0, top: 0};
 949             // if "next" animate left position to last child, then reset left to 0
 950             if(slider.settings.autoDirection == 'next'){
 951                 position = el.find('.bx-clone').first().position();
 952             // if "prev" animate left position to 0, then reset left to first non-clone child
 953             }else{
 954                 reset = slider.children.first().position();
 955             }
 956             var animateProperty = slider.settings.mode == 'horizontal' ? -position.left : -position.top;
 957             var resetValue = slider.settings.mode == 'horizontal' ? -reset.left : -reset.top;
 958             var params = {resetValue: resetValue};
 959             setPositionProperty(animateProperty, 'ticker', speed, params);
 960         }
 961 
 962         /**
 963          * Initializes touch events
 964          */
 965         var initTouch = function(){
 966             // initialize object to contain all touch values
 967             slider.touch = {
 968                 start: {x: 0, y: 0},
 969                 end: {x: 0, y: 0}
 970             }
 971             slider.viewport.bind('touchstart', onTouchStart);
 972         }
 973 
 974         /**
 975          * Event handler for "touchstart"
 976          *
 977          * @param e (event)
 978          *  - DOM event object
 979          */
 980         var onTouchStart = function(e){
 981             if(slider.working){
 982                 e.preventDefault();
 983             }else{
 984                 // record the original position when touch starts
 985                 slider.touch.originalPos = el.position();
 986                 var orig = e.originalEvent;
 987                 // record the starting touch x, y coordinates
 988                 slider.touch.start.x = orig.changedTouches[0].pageX;
 989                 slider.touch.start.y = orig.changedTouches[0].pageY;
 990                 // bind a "touchmove" event to the viewport
 991                 slider.viewport.bind('touchmove', onTouchMove);
 992                 // bind a "touchend" event to the viewport
 993                 slider.viewport.bind('touchend', onTouchEnd);
 994             }
 995         }
 996 
 997         /**
 998          * Event handler for "touchmove"
 999          *
1000          * @param e (event)
1001          *  - DOM event object
1002          */
1003         var onTouchMove = function(e){
1004             var orig = e.originalEvent;
1005             // if scrolling on y axis, do not prevent default
1006             var xMovement = Math.abs(orig.changedTouches[0].pageX - slider.touch.start.x);
1007             var yMovement = Math.abs(orig.changedTouches[0].pageY - slider.touch.start.y);
1008             // x axis swipe
1009             if((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX){
1010                 e.preventDefault();
1011             // y axis swipe
1012             }else if((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY){
1013                 e.preventDefault();
1014             }
1015             if(slider.settings.mode != 'fade' && slider.settings.oneToOneTouch){
1016                 var value = 0;
1017                 // if horizontal, drag along x axis
1018                 if(slider.settings.mode == 'horizontal'){
1019                     var change = orig.changedTouches[0].pageX - slider.touch.start.x;
1020                     value = slider.touch.originalPos.left + change;
1021                 // if vertical, drag along y axis
1022                 }else{
1023                     var change = orig.changedTouches[0].pageY - slider.touch.start.y;
1024                     value = slider.touch.originalPos.top + change;
1025                 }
1026                 setPositionProperty(value, 'reset', 0);
1027             }
1028         }
1029 
1030         /**
1031          * Event handler for "touchend"
1032          *
1033          * @param e (event)
1034          *  - DOM event object
1035          */
1036         var onTouchEnd = function(e){
1037             slider.viewport.unbind('touchmove', onTouchMove);
1038             var orig = e.originalEvent;
1039             var value = 0;
1040             // record end x, y positions
1041             slider.touch.end.x = orig.changedTouches[0].pageX;
1042             slider.touch.end.y = orig.changedTouches[0].pageY;
1043             // if fade mode, check if absolute x distance clears the threshold
1044             if(slider.settings.mode == 'fade'){
1045                 var distance = Math.abs(slider.touch.start.x - slider.touch.end.x);
1046                 if(distance >= slider.settings.swipeThreshold){
1047                     slider.touch.start.x > slider.touch.end.x ? el.goToNextSlide() : el.goToPrevSlide();
1048                     el.stopAuto();
1049                 }
1050             // not fade mode
1051             }else{
1052                 var distance = 0;
1053                 // calculate distance and el's animate property
1054                 if(slider.settings.mode == 'horizontal'){
1055                     distance = slider.touch.end.x - slider.touch.start.x;
1056                     value = slider.touch.originalPos.left;
1057                 }else{
1058                     distance = slider.touch.end.y - slider.touch.start.y;
1059                     value = slider.touch.originalPos.top;
1060                 }
1061                 // if not infinite loop and first / last slide, do not attempt a slide transition
1062                 if(!slider.settings.infiniteLoop && ((slider.active.index == 0 && distance > 0) || (slider.active.last && distance < 0))){
1063                     setPositionProperty(value, 'reset', 200);
1064                 }else{
1065                     // check if distance clears threshold
1066                     if(Math.abs(distance) >= slider.settings.swipeThreshold){
1067                         distance < 0 ? el.goToNextSlide() : el.goToPrevSlide();
1068                         el.stopAuto();
1069                     }else{
1070                         // el.animate(property, 200);
1071                         setPositionProperty(value, 'reset', 200);
1072                     }
1073                 }
1074             }
1075             slider.viewport.unbind('touchend', onTouchEnd);
1076         }
1077 
1078         /**
1079          * Window resize event callback
1080          */
1081         var resizeWindow = function(e){
1082             // don't do anything if slider isn't initialized.
1083             if(!slider.initialized) return;
1084             // get the new window dimens (again, thank you IE)
1085             var windowWidthNew = $(window).width();
1086             var windowHeightNew = $(window).height();
1087             // make sure that it is a true window resize
1088             // *we must check this because our dinosaur friend IE fires a window resize event when certain DOM elements
1089             // are resized. Can you just die already?*
1090             if(windowWidth != windowWidthNew || windowHeight != windowHeightNew){
1091                 // set the new window dimens
1092                 windowWidth = windowWidthNew;
1093                 windowHeight = windowHeightNew;
1094                 // update all dynamic elements
1095                 el.redrawSlider();
1096                 // Call user resize handler
1097                 slider.settings.onSliderResize.call(el, slider.active.index);
1098             }
1099         }
1100 
1101         /**
1102          * ===================================================================================
1103          * = PUBLIC FUNCTIONS
1104          * ===================================================================================
1105          */
1106 
1107         /**
1108          * Performs slide transition to the specified slide
1109          *
1110          * @param slideIndex (int)
1111          *  - the destination slide's index (zero-based)
1112          *
1113          * @param direction (string)
1114          *  - INTERNAL USE ONLY - the direction of travel ("prev" / "next")
1115          */
1116         el.goToSlide = function(slideIndex, direction){
1117             // if plugin is currently in motion, ignore request
1118             if(slider.working || slider.active.index == slideIndex) return;
1119             // declare that plugin is in motion
1120             slider.working = true;
1121             // store the old index
1122             slider.oldIndex = slider.active.index;
1123             // if slideIndex is less than zero, set active index to last child (this happens during infinite loop)
1124             if(slideIndex < 0){
1125                 slider.active.index = getPagerQty() - 1;
1126             // if slideIndex is greater than children length, set active index to 0 (this happens during infinite loop)
1127             }else if(slideIndex >= getPagerQty()){
1128                 slider.active.index = 0;
1129             // set active index to requested slide
1130             }else{
1131                 slider.active.index = slideIndex;
1132             }
1133             // onSlideBefore, onSlideNext, onSlidePrev callbacks
1134             slider.settings.onSlideBefore(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1135             if(direction == 'next'){
1136                 slider.settings.onSlideNext(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1137             }else if(direction == 'prev'){
1138                 slider.settings.onSlidePrev(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1139             }
1140             // check if last slide
1141             slider.active.last = slider.active.index >= getPagerQty() - 1;
1142             // update the pager with active class
1143             if(slider.settings.pager) updatePagerActive(slider.active.index);
1144             // // check for direction control update
1145             if(slider.settings.controls) updateDirectionControls();
1146             // if slider is set to mode: "fade"
1147             if(slider.settings.mode == 'fade'){
1148                 // if adaptiveHeight is true and next height is different from current height, animate to the new height
1149                 if(slider.settings.adaptiveHeight && slider.viewport.height() != getViewportHeight()){
1150                     slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
1151                 }
1152                 // fade out the visible child and reset its z-index value
1153                 slider.children.filter(':visible').fadeOut(slider.settings.speed).css({zIndex: 0});
1154                 // fade in the newly requested slide
1155                 slider.children.eq(slider.active.index).css('zIndex', slider.settings.slideZIndex+1).fadeIn(slider.settings.speed, function(){
1156                     $(this).css('zIndex', slider.settings.slideZIndex);
1157                     updateAfterSlideTransition();
1158                 });
1159             // slider mode is not "fade"
1160             }else{
1161                 // if adaptiveHeight is true and next height is different from current height, animate to the new height
1162                 if(slider.settings.adaptiveHeight && slider.viewport.height() != getViewportHeight()){
1163                     slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
1164                 }
1165                 var moveBy = 0;
1166                 var position = {left: 0, top: 0};
1167                 // if carousel and not infinite loop
1168                 if(!slider.settings.infiniteLoop && slider.carousel && slider.active.last){
1169                     if(slider.settings.mode == 'horizontal'){
1170                         // get the last child position
1171                         var lastChild = slider.children.eq(slider.children.length - 1);
1172                         position = lastChild.position();
1173                         // calculate the position of the last slide
1174                         moveBy = slider.viewport.width() - lastChild.outerWidth();
1175                     }else{
1176                         // get last showing index position
1177                         var lastShowingIndex = slider.children.length - slider.settings.minSlides;
1178                         position = slider.children.eq(lastShowingIndex).position();
1179                     }
1180                     // horizontal carousel, going previous while on first slide (infiniteLoop mode)
1181                 }else if(slider.carousel && slider.active.last && direction == 'prev'){
1182                     // get the last child position
1183                     var eq = slider.settings.moveSlides == 1 ? slider.settings.maxSlides - getMoveBy() : ((getPagerQty() - 1) * getMoveBy()) - (slider.children.length - slider.settings.maxSlides);
1184                     var lastChild = el.children('.bx-clone').eq(eq);
1185                     position = lastChild.position();
1186                 // if infinite loop and "Next" is clicked on the last slide
1187                 }else if(direction == 'next' && slider.active.index == 0){
1188                     // get the last clone position
1189                     position = el.find('> .bx-clone').eq(slider.settings.maxSlides).position();
1190                     slider.active.last = false;
1191                 // normal non-zero requests
1192                 }else if(slideIndex >= 0){
1193                     var requestEl = slideIndex * getMoveBy();
1194                     position = slider.children.eq(requestEl).position();
1195                 }
1196 
1197                 /* If the position doesn't exist
1198                  * (e.g. if you destroy the slider on a next click),
1199                  * it doesn't throw an error.
1200                  */
1201                 if ("undefined" !== typeof(position)) {
1202                     var value = slider.settings.mode == 'horizontal' ? -(position.left - moveBy) : -position.top;
1203                     // plugin values to be animated
1204                     setPositionProperty(value, 'slide', slider.settings.speed);
1205                 }
1206             }
1207         }
1208 
1209         /**
1210          * Transitions to the next slide in the show
1211          */
1212         el.goToNextSlide = function(){
1213             // if infiniteLoop is false and last page is showing, disregard call
1214             if (!slider.settings.infiniteLoop && slider.active.last) return;
1215             var pagerIndex = parseInt(slider.active.index) + 1;
1216             el.goToSlide(pagerIndex, 'next');
1217         }
1218 
1219         /**
1220          * Transitions to the prev slide in the show
1221          */
1222         el.goToPrevSlide = function(){
1223             // if infiniteLoop is false and last page is showing, disregard call
1224             if (!slider.settings.infiniteLoop && slider.active.index == 0) return;
1225             var pagerIndex = parseInt(slider.active.index) - 1;
1226             el.goToSlide(pagerIndex, 'prev');
1227         }
1228 
1229         /**
1230          * Starts the auto show
1231          *
1232          * @param preventControlUpdate (boolean)
1233          *  - if true, auto controls state will not be updated
1234          */
1235         el.startAuto = function(preventControlUpdate){
1236             // if an interval already exists, disregard call
1237             if(slider.interval) return;
1238             // create an interval
1239             slider.interval = setInterval(function(){
1240                 slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
1241             }, slider.settings.pause);
1242             // if auto controls are displayed and preventControlUpdate is not true
1243             if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('stop');
1244         }
1245 
1246         /**
1247          * Stops the auto show
1248          *
1249          * @param preventControlUpdate (boolean)
1250          *  - if true, auto controls state will not be updated
1251          */
1252         el.stopAuto = function(preventControlUpdate){
1253             // if no interval exists, disregard call
1254             if(!slider.interval) return;
1255             // clear the interval
1256             clearInterval(slider.interval);
1257             slider.interval = null;
1258             // if auto controls are displayed and preventControlUpdate is not true
1259             if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('start');
1260         }
1261 
1262         /**
1263          * Returns current slide index (zero-based)
1264          */
1265         el.getCurrentSlide = function(){
1266             return slider.active.index;
1267         }
1268 
1269         /**
1270          * Returns current slide element
1271          */
1272         el.getCurrentSlideElement = function(){
1273             return slider.children.eq(slider.active.index);
1274         }
1275 
1276         /**
1277          * Returns number of slides in show
1278          */
1279         el.getSlideCount = function(){
1280             return slider.children.length;
1281         }
1282 
1283         /**
1284          * Update all dynamic slider elements
1285          */
1286         el.redrawSlider = function(){
1287             // resize all children in ratio to new screen size
1288             slider.children.add(el.find('.bx-clone')).width(getSlideWidth());
1289             // adjust the height
1290             slider.viewport.css('height', getViewportHeight());
1291             // update the slide position
1292             if(!slider.settings.ticker) setSlidePosition();
1293             // if active.last was true before the screen resize, we want
1294             // to keep it last no matter what screen size we end on
1295             if (slider.active.last) slider.active.index = getPagerQty() - 1;
1296             // if the active index (page) no longer exists due to the resize, simply set the index as last
1297             if (slider.active.index >= getPagerQty()) slider.active.last = true;
1298             // if a pager is being displayed and a custom pager is not being used, update it
1299             if(slider.settings.pager && !slider.settings.pagerCustom){
1300                 populatePager();
1301                 updatePagerActive(slider.active.index);
1302             }
1303         }
1304 
1305         /**
1306          * Destroy the current instance of the slider (revert everything back to original state)
1307          */
1308         el.destroySlider = function(){
1309             // don't do anything if slider has already been destroyed
1310             if(!slider.initialized) return;
1311             slider.initialized = false;
1312             $('.bx-clone', this).remove();
1313             slider.children.each(function() {
1314                 $(this).data("origStyle") != undefined ? $(this).attr("style", $(this).data("origStyle")) : $(this).removeAttr('style');
1315             });
1316             $(this).data("origStyle") != undefined ? this.attr("style", $(this).data("origStyle")) : $(this).removeAttr('style');
1317             $(this).unwrap().unwrap();
1318             if(slider.controls.el) slider.controls.el.remove();
1319             if(slider.controls.next) slider.controls.next.remove();
1320             if(slider.controls.prev) slider.controls.prev.remove();
1321             if(slider.pagerEl && slider.settings.controls) slider.pagerEl.remove();
1322             $('.bx-caption', this).remove();
1323             if(slider.controls.autoEl) slider.controls.autoEl.remove();
1324             clearInterval(slider.interval);
1325             if(slider.settings.responsive) $(window).unbind('resize', resizeWindow);
1326         }
1327 
1328         /**
1329          * Reload the slider (revert all DOM changes, and re-initialize)
1330          */
1331         el.reloadSlider = function(settings){
1332             if (settings != undefined) options = settings;
1333             el.destroySlider();
1334             init();
1335         }
1336 
1337         init();
1338 
1339         // returns the current jQuery object
1340         return this;
1341     }
1342 
1343 })(jQuery);

相关阅读:
【SCOI 2011】糖果
 【POJ 3159】 Candies
【POJ 1716】 Integer Intervals
【POJ 2983】 Is the information reliable？
【POJ 1364】 King
【POJ 1201】 Intervals
【POJ 1804】 Brainman
6月10日省中提高组题解
 【POJ 3352】 Road Construction
【POJ 1144】 Network
原文地址：https://www.cnblogs.com/Arlar/p/5635741.html