https://onjornal.com/site/js/jquery.jcarousellite.js

1/*!
2 * jCarouselLite - v1.1 - 2014-09-28
3 * http://www.gmarwaha.com/jquery/jcarousellite/
4 * Copyright (c) 2014 Ganeshji Marwaha
5 * Licensed MIT (https://github.com/ganeshmax/jcarousellite/blob/master/LICENSE)
6 */
7
8(function($) {                                          // Compliant with jquery.noConflict()
9    $.jCarouselLite = {
10        version: '1.1'
11    };
12
13    $.fn.jCarouselLite = function(options) {
14
15        options = $.extend({}, $.fn.jCarouselLite.options, options || {});
16
17        return this.each(function() {   // Returns the element collection. Chainable.
18
19            var running,
20                animCss, sizeCss,
21                div = $(this), ul, initialLi, li,
22                liSize, ulSize, divSize,
23                numVisible, initialItemLength, itemLength, calculatedTo, autoTimeout;
24
25            initVariables();                    // Set the above variables after initial calculations
26            initStyles();                       // Set the appropriate styles for the carousel div, ul and li
27            initSizes();                        // Set appropriate sizes for the carousel div, ul and li
28            attachEventHandlers();              // Attach event handlers for carousel to respond
29
30            function go(to) {
31                if(!running) {
32                    clearTimeout(autoTimeout);  // Prevents multiple clicks while auto-scrolling - edge case
33                    calculatedTo = to;
34
35                    if(options.beforeStart) {   // Call the beforeStart() callback
36                        options.beforeStart.call(this, visibleItems());
37                    }
38
39                    if(options.circular) {      // If circular, and "to" is going OOB, adjust it
40                        adjustOobForCircular(to);
41                    } else {                    // If non-circular and "to" is going OOB, adjust it.
42                        adjustOobForNonCircular(to);
43                    }                           // If neither overrides "calculatedTo", we are not in edge cases.
44
45                    animateToPosition({         // Animate carousel item to position based on calculated values.
46                        start: function() {
47                            running = true;
48                        },
49                        done: function() {
50                            if(options.afterEnd) {
51                                options.afterEnd.call(this, visibleItems());
52                            }
53                            if(options.auto) {
54                                setupAutoScroll();
55                            }
56                            running = false;
57                        }
58                    });
59
60                    if(!options.circular) {     // Enabling / Disabling buttons is applicable in non-circular mode only.
61                        disableOrEnableButtons();
62                    }
63
64                }
65                return false;
66            }
67
68            function initVariables() {
69                running = false;
70                animCss = options.vertical ? "top" : "left";
71                sizeCss = options.vertical ? "height" : "width";
72                ul = div.find(">ul");
73                initialLi = ul.find(">li");
74                initialItemLength = initialLi.size();
75
76                // To avoid a scenario where number of items is just 1 and visible is 3 for example.
77                numVisible = initialItemLength < options.visible ? initialItemLength : options.visible;
78
79                if(options.circular) {
80                    var $lastItemSet = initialLi.slice(initialItemLength-numVisible).clone();
81                    var $firstItemSet = initialLi.slice(0,numVisible).clone();
82
83                    ul.prepend($lastItemSet)        // Prepend the lis with final items so that the user can click the back button to start with
84                        .append($firstItemSet);     // Append the lis with first items so that the user can click the next button even after reaching the end
85
86                    options.start += numVisible;    // Since we have a few artificial lis in the front, we will have to move the pointer to point to the real first item
87                }
88
89                li = $("li", ul);
90                itemLength = li.size();
91                calculatedTo = options.start;
92            }
93
94            function initStyles() {
95                div.css("visibility", "visible");   // If the div was set to hidden in CSS, make it visible now
96
97                li.css({
98                    overflow: "hidden",
99                    "float": options.vertical ? "none" : "left" // Some minification tools fail if "" is not used
100                });
101
102                ul.css({
103                    margin: "0",
104                    padding: "0",
105                    position: "relative",
106                    "list-style": "none",
107                    "z-index": "1"
108                });
109
110                div.css({
111                    overflow: "hidden",
112                    position: "relative",
113                    "z-index": "2",
114                    left: "0px"
115                });
116
117                // For a non-circular carousel, if the start is 0 and btnPrev is supplied, disable the prev button
118                if(!options.circular && options.btnPrev && options.start == 0) {
119                    $(options.btnPrev).addClass("disabled");
120                }
121            }
122
123            function initSizes() {
124
125                liSize = options.vertical ?         // Full li size(incl margin)-Used for animation and to set ulSize
126                    li.outerHeight(true) :
127                    li.outerWidth(true);
128                ulSize = liSize * itemLength;       // size of full ul(total length, not just for the visible items)
129                divSize = liSize * numVisible;      // size of entire div(total length for just the visible items)
130
131                // Generally, LI's dimensions should be specified explicitly in a style-sheet
132                // But in the case of img (with width and height attr), we can derive L

132I's dimensions and set here
133                // May be applicable for other types of LI children if their dimensions are explicitly specified
134                // Individual LI dimensions
135                li.css({
136                    width: li.width(),
137                    height: li.height()
138                });
139
140                // Size of the entire UL. Including hidden and visible elements
141                // Will include LI's (width + padding + border + margin) * itemLength - Using outerwidth(true)
142                ul.css(sizeCss, ulSize+"px")
143                    .css(animCss, -(calculatedTo * liSize));
144
145                // Width of the DIV. Only the width of the visible elements
146                // Will include LI's (width + padding + border + margin) * numVisible - Using outerwidth(true)
147                div.css(sizeCss, divSize+"px");
148
149            }
150
151            function attachEventHandlers() {
152                if(options.btnPrev) {
153                    $(options.btnPrev).click(function() {
154                        return go(calculatedTo - options.scroll);
155                    });
156                }
157
158                if(options.btnNext) {
159                    $(options.btnNext).click(function() {
160                        return go(calculatedTo + options.scroll);
161                    });
162                }
163
164                if(options.btnGo) {
165                    $.each(options.btnGo, function(i, val) {
166                        $(val).click(function() {
167                            return go(options.circular ? numVisible + i : i);
168                        });
169                    });
170                }
171
172                if(options.mouseWheel && div.mousewheel) {
173                    div.mousewheel(function(e, d) {
174                        return d > 0 ?
175                            go(calculatedTo - options.scroll) :
176                            go(calculatedTo + options.scroll);
177                    });
178                }
179
180                if(options.auto) {
181                    setupAutoScroll();
182                }
183            }
184
185            function setupAutoScroll() {
186                autoTimeout = setTimeout(function() {
187                    go(calculatedTo + options.scroll);
188                }, options.auto);
189            }
190
191            function visibleItems() {
192                return li.slice(calculatedTo).slice(0,numVisible);
193            }
194
195            function adjustOobForCircular(to) {
196                var newPosition;
197
198                // If first, then goto last
199                if(to <= options.start - numVisible - 1) {
200                    newPosition = to + initialItemLength + options.scroll;
201                    ul.css(animCss, -(newPosition * liSize) + "px");
202                    calculatedTo = newPosition - options.scroll;
203
204                    console.log("Before - Positioned at: " + newPosition + " and Moving to: " + calculatedTo);
205                }
206
207                // If last, then goto first
208                else if(to >= itemLength - numVisible + 1) {
209                    newPosition = to - initialItemLength - options.scroll;
210                    ul.css(animCss, -(newPosition * liSize) + "px");
211                    calculatedTo = newPosition + options.scroll;
212
213                    console.log("After - Positioned at: " + newPosition + " and Moving to: " + calculatedTo);
214                }
215            }
216
217            function adjustOobForNonCircular(to) {
218                // If user clicks "prev" and tries to go before the first element, reset it to first element.
219                if(to < 0) {
220                    calculatedTo = 0;
221                }
222                // If "to" is greater than the max index that we can use to show another set of elements
223                // it means that we will have to reset "to" to a smallest possible index that can show it
224                else if(to > itemLength - numVisible) {
225                    calculatedTo = itemLength - numVisible;
226                }
227
228                console.log("Item Length: " + itemLength + "; " +
229                    "To: " + to + "; " +
230                    "CalculatedTo: " + calculatedTo + "; " +
231                    "Num Visible: " + numVisible);
232            }
233
234            function disableOrEnableButtons() {
235                $(options.btnPrev + "," + options.btnNext).removeClass("disabled");
236                $( (calculatedTo-options.scroll<0 && options.btnPrev)
237                    ||
238                    (calculatedTo+options.scroll > itemLength-numVisible && options.btnNext)
239                    ||
240                    []
241                ).addClass("disabled");
242            }
243
244            function animateToPosition(animationOptions) {
245                running = true;
246
247                ul.animate(
248                    animCss == "left" ?

249                    { left: -(calculatedTo*liSize) } :
250                    { top: -(calculatedTo*liSize) },
251
252                    $.extend({
253                        duration: options.speed,
254                        easing: options.easing
255                    }, animationOptions)
256                );
257            }
258        });
259    };
260
261    $.fn.jCarouselLite.options = {
262        btnPrev: null,              // CSS Selector for the previous button
263        btnNext: null,              // CSS Selector for the next button
264        btnGo: null,                // CSS Selector for the go button
265        mouseWheel: false,          // Set "true" if you want the carousel scrolled using mouse wheel
266        auto: null,                 // Set to a numeric value (800) in millis. Time period between auto scrolls
267
268        speed: 200,                 // Set to a numeric value in millis. Speed of scroll
269        easing: null,               // Set to easing (bounceout) to specify the animation easing
270
271        vertical: false,            // Set to "true" to make the carousel scroll vertically
272        circular: true,             // Set to "true" to make it an infinite carousel
273        visible: 3,                 // Set to a numeric value to specify the number of visible elements at a time
274        start: 0,                   // Set to a numeric value to specify which item to start from
275        scroll: 1,                  // Set to a numeric value to specify how many items to scroll for one scroll event
276
277        beforeStart: null,          // Set to a function to receive a callback before every scroll start
278        afterEnd: null              // Set to a function to receive a callback after every scroll end
279    };
280
281})(jQuery);