https://www.kinnemaninsurance.com/img/resources/jquery.cycle2.carousel.js

1/*! carousel transition plugin for Cycle2;  version: 20130528 */
2(function($) {
3"use strict";
4
5$( document ).on('cycle-bootstrap', function( e, opts, API ) {
6    if ( opts.fx !== 'carousel' )
7        return;
8
9    API.getSlideIndex = function( el ) {
10        var slides = this.opts()._carouselWrap.children();
11        var i = slides.index( el );
12        return i % slides.length;
13    };
14
15    // override default 'next' function
16    API.next = function() {
17        var count = opts.reverse ? -1 : 1;
18        if ( opts.allowWrap === false && ( opts.currSlide + count ) > opts.slideCount - opts.carouselVisible )
19            return;
20        opts.API.advanceSlide( count );
21        opts.API.trigger('cycle-next', [ opts ]).log('cycle-next');
22    };
23
24});
25
26
27$.fn.cycle.transitions.carousel = {
28    // transition API impl
29    preInit: function( opts ) {
30        opts.hideNonActive = false;
31        
32        opts.container.on('cycle-destroyed', $.proxy(this.onDestroy, opts.API));
33        // override default API implementation
34        opts.API.stopTransition = this.stopTransition;
35
36        // issue #10
37        for (var i=0; i < opts.startingSlide; i++) {
38            opts.container.append( opts.slides[0] );
39        }        
40    },
41
42    // transition API impl
43    postInit: function( opts ) {
44        var i, j, slide, pagerCutoffIndex, wrap;
45        var vert = opts.carouselVertical;
46        if (opts.carouselVisible && opts.carouselVisible > opts.slideCount)
47            opts.carouselVisible = opts.slideCount - 1;
48        var visCount = opts.carouselVisible || opts.slides.length;
49        var slideCSS = { display: vert ? 'block' : 'inline-block', position: 'static' };
50
51        // required styles
52        opts.container.css({ position: 'relative', overflow: 'hidden' });
53        opts.slides.css( slideCSS );
54
55        opts._currSlide = opts.currSlide;
56
57        // wrap slides in a div; this div is what is animated
58        wrap = $('<div class="cycle-carousel-wrap"></div>')
59            .prependTo( opts.container )
60            .css({ margin: 0, padding: 0, top: 0, left: 0, position: 'absolute' })
61            .append( opts.slides );
62
63        opts._carouselWrap = wrap;
64
65        if ( !vert )
66            wrap.css('white-space', 'nowrap');
67
68        if ( opts.allowWrap !== false ) {
69            // prepend and append extra slides so we don't see any empty space when we
70            // near the end of the carousel.  for fluid containers, add even more clones
71            // so there is plenty to fill the screen
72            // @todo: optimzie this based on slide sizes
73
74            for ( j=0; j < (opts.carouselVisible === undefined ? 2 : 1); j++ ) {
75                for ( i=0; i < opts.slideCount; i++ ) {
76                    wrap.append( opts.slides[i].cloneNode(true) );
77                }
78                i = opts.slideCount;
79                while ( i-- ) { // #160, #209
80                    wrap.prepend( opts.slides[i].cloneNode(true) );
81                }
82            }
83
84            wrap.find('.cycle-slide-active').removeClass('cycle-slide-active');
85            opts.slides.eq(opts.startingSlide).addClass('cycle-slide-active');
86        }
87
88        if ( opts.pager && opts.allowWrap === false ) {
89            // hide "extra" pagers
90            pagerCutoffIndex = opts.slideCount - visCount;
91            $( opts.pager ).children().filter( ':gt('+pagerCutoffIndex+')' ).hide();
92        }
93
94        opts._nextBoundry = opts.slideCount - opts.carouselVisible;
95
96        this.prepareDimensions( opts );
97    },
98
99    prepareDimensions: function( opts ) {
100        var dim, offset, pagerCutoffIndex, tmp, j;
101        var vert = opts.carouselVertical;
102        var visCount = opts.carouselVisible || opts.slides.length;
103
104        if ( opts.carouselFluid && opts.carouselVisible ) {
105            if ( ! opts._carouselResizeThrottle ) {
106            // fluid container AND fluid slides; slides need to be resized to fit container
107                this.fluidSlides( opts );
108            }
109        }
110        else if ( opts.carouselVisible && opts.carouselSlideDimension ) {
111            dim = visCount * opts.carouselSlideDimension;
112            opts.container[ vert ? 'height' : 'width' ]( dim );
113        }
114        else if ( opts.carouselVisible ) {
115            dim = visCount * $(opts.slides[0])[vert ? 'outerHeight' : 'outerWidth'](true);
116            opts.container[ vert ? 'height' : 'width' ]( dim );
117        }
118        // else {
119        //     // fluid; don't size the container
120        // }
121

122        offset = ( opts.carouselOffset || 0 );
123        if ( opts.allowWrap !== false ) {
124            if ( opts.carouselSlideDimension ) {
125                offset -= ( (opts.slideCount + opts.currSlide) * opts.carouselSlideDimension );
126            }
127            else {
128                // calculate offset based on actual slide dimensions
129                tmp = opts._carouselWrap.children();
130                for (j=0; j < (opts.slideCount + opts.currSlide); j++) {
131                    offset -= $(tmp[j])[vert?'outerHeight':'outerWidth'](true);
132                }
133            }
134        }
135
136        opts._carouselWrap.css( vert ? 'top' : 'left', offset );
137    },
138
139    fluidSlides: function( opts ) {
140        var timeout;
141        var slide = opts.slides.eq(0);
142        var adjustment = slide.outerWidth() - slide.width();
143        var prepareDimensions = this.prepareDimensions;
144
145        // throttle resize event
146        $(window).on( 'resize', resizeThrottle);
147
148        opts._carouselResizeThrottle = resizeThrottle;
149        onResize();
150
151        function resizeThrottle() {
152            clearTimeout( timeout );
153            timeout = setTimeout( onResize, 20 );
154        }
155
156        function onResize() {
157            opts._carouselWrap.stop( false, true );
158            var slideWidth = opts.container.width() / opts.carouselVisible;
159            slideWidth = Math.ceil( slideWidth - adjustment );
160            opts._carouselWrap.children().width( slideWidth );
161            if ( opts._sentinel )
162                opts._sentinel.width( slideWidth );
163            prepareDimensions( opts );
164        }
165    },
166
167    // transition API impl
168    transition: function( opts, curr, next, fwd, callback ) {
169        var moveBy, props = {};
170        var hops = opts.nextSlide - opts.currSlide;
171        var vert = opts.carouselVertical;
172        var speed = opts.speed;
173
174        // handle all the edge cases for wrapping & non-wrapping
175        if ( opts.allowWrap === false ) {
176            fwd = hops > 0;
177            var currSlide = opts._currSlide;
178            var maxCurr = opts.slideCount - opts.carouselVisible;
179            if ( hops > 0 && opts.nextSlide > maxCurr && currSlide == maxCurr ) {
180                hops = 0;
181            }
182            else if ( hops > 0 && opts.nextSlide > maxCurr ) {
183                hops = opts.nextSlide - currSlide - (opts.nextSlide - maxCurr);
184            }
185            else if ( hops < 0 && opts.currSlide > maxCurr && opts.nextSlide > maxCurr ) {
186                hops = 0;
187            }
188            else if ( hops < 0 && opts.currSlide > maxCurr ) {
189                hops += opts.currSlide - maxCurr;
190            }
191            else 
192                currSlide = opts.currSlide;
193
194            moveBy = this.getScroll( opts, vert, currSlide, hops );
195            opts.API.opts()._currSlide = opts.nextSlide > maxCurr ? maxCurr : opts.nextSlide;
196        }
197        else {
198            if ( fwd && opts.nextSlide === 0 ) {
199                // moving from last slide to first
200                moveBy = this.getDim( opts, opts.currSlide, vert );
201                callback = this.genCallback( opts, fwd, vert, callback );
202            }
203            else if ( !fwd && opts.nextSlide == opts.slideCount - 1 ) {
204                // moving from first slide to last
205                moveBy = this.getDim( opts, opts.currSlide, vert );
206                callback = this.genCallback( opts, fwd, vert, callback );
207            }
208            else {
209                moveBy = this.getScroll( opts, vert, opts.currSlide, hops );
210            }
211        }
212
213        props[ vert ? 'top' : 'left' ] = fwd ? ( "-=" + moveBy ) : ( "+=" + moveBy );
214
215        // throttleSpeed means to scroll slides at a constant rate, rather than
216        // a constant speed
217        if ( opts.throttleSpeed )
218            speed = (moveBy / $(opts.slides[0])[vert ? 'height' : 'width']() ) * opts.speed;
219
220        opts._carouselWrap.animate( props, speed, opts.easing, callback );
221    },
222
223    getDim: function( opts, index, vert ) {
224        var slide = $( opts.slides[index] );
225        return slide[ vert ? 'outerHeight' : 'outerWidth'](true);
226    },
227
228    getScroll: function( opts, vert, currSlide, hops ) {
229        var i, moveBy = 0;
230
231        if (hops > 0) {
232            for (i=currSlide; i < currSlide+hops; i++)
233                moveBy += this.getDim( opts, i, vert);
234        }
235        else {
236            for (i=currSlide; i > currSlide+hops; i--)
237                moveBy += this.getDim( opts, i, vert);
238        }
239        return moveBy;
240    },
241
242    genCallback: function( opts, fwd, vert, callback ) {
243        // returns callback fn that resets the left/top wrap position to the "real" slides
244        return function() {
245            var pos = $(opts.slides[opts.nextSlide]).position();
246            var offset = 0 - pos[vert?'top':'left'] + (opts.carouselOff

246set || 0);
247            opts._carouselWrap.css( opts.carouselVertical ? 'top' : 'left', offset );
248            callback();
249        };
250    },
251
252    // core API override
253    stopTransition: function() {
254        var opts = this.opts();
255        opts.slides.stop( false, true );
256        opts._carouselWrap.stop( false, true );
257    },
258
259    // core API supplement
260    onDestroy: function( e ) {
261        var opts = this.opts();
262        if ( opts._carouselResizeThrottle )
263            $( window ).off( 'resize', opts._carouselResizeThrottle );
264        opts.slides.prependTo( opts.container );
265        opts._carouselWrap.remove();
266    }
267};
268
269})(jQuery);