https://osowa.com/jscripts/jquery.wmuSlider/jquery.wmuslider.js

1/*!
2 * jQuery wmuSlider v2.1
3 * 
4 * Copyright (c) 2011 Brice Lechatellier
5 * http://brice.lechatellier.com/
6 *
7 * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
8 */
9
10;(function($) {
11    
12    $.fn.wmuSlider = function(options) {
13
14        /* Default Options
15        ================================================== */       
16        var defaults = {
17            animation: 'fade',
18            animationDuration: 600,
19            slideshow: true,
20            slideshowSpeed: 7000,
21            slideToStart: 0,
22            navigationControl: true,
23            paginationControl: true,
24            previousText: 'Previous',
25            nextText: 'Next',
26            touch: false,
27            slide: 'article',
28            items: 1
29        };
30        var options = $.extend(defaults, options);
31        
32        return this.each(function() {
33
34            /* Variables
35            ================================================== */
36            var $this = $(this);
37            var currentIndex = options.slideToStart;
38            var wrapper = $this.find('.wmuSliderWrapper');
39            var slides = $this.find(options.slide);
40            var slidesCount = slides.length;
41            var slideshowTimeout;
42            var paginationControl;
43            var isAnimating;
44            
45            
46            /* Load Slide
47            ================================================== */ 
48            var loadSlide = function(index, infinite, touch) {
49                if (isAnimating) {
50                    return false;
51                }
52                isAnimating = true;
53                currentIndex = index;
54                var slide = $(slides[index]);
55                $this.animate({ height: slide.innerHeight() });
56                if (options.animation == 'fade') {
57                    slides.css({
58                        position: 'absolute',
59                        opacity: 0
60                    });
61                    slide.css('position', 'relative');
62                    slide.animate({ opacity:1 }, options.animationDuration, function() {
63                        isAnimating = false;
64                    });
65                } else if (options.animation == 'slide') {
66                    if (!infinite) {
67                        wrapper.animate({ marginLeft: -$this.width() / options.items * index }, options.animationDuration, function() {
68                            isAnimating = false;
69                        });
70                    } else {
71                        if (index == 0) {
72                            wrapper.animate({ marginLeft: -$this.width() / options.items * slidesCount }, options.animationDuration, function() {
73                                wrapper.css('marginLeft', 0);
74                                isAnimating = false;
75                            });
76                        } else {
77                            if (!touch) {
78                                wrapper.css('marginLeft', -$this.width() / options.items * slidesCount);
79                            }
80                            wrapper.animate({ marginLeft: -$this.width() / options.items * index }, options.animationDuration, function() {
81                                isAnimating = false;
82                            });
83                        }
84                    }
85                }
86
87                if (paginationControl) {
88                    paginationControl.find('a').each(function(i) {
89                        if(i == index) {
90                            $(this).addClass('wmuActive');
91                        } else {
92                            $(this).removeClass('wmuActive');
93                        }
94                    });
95                }    
96                                                    
97                // Trigger Event
98                $this.trigger('slideLoaded', index);             
99            };
100            
101            
102            /* Navigation Control
103            ================================================== */ 
104            if (options.navigationControl) {
105                var prev = $('<a class="wmuSliderPrev">' + options.previousText + '</a>');
106                prev.click(function(e) {
107                    e.preventDefault();
108                    clearTimeout(slideshowTimeout);
109                    if (currentIndex == 0) {
110                        loadSlide(slidesCount - 1, true);
111                    } else {
112                        loadSlide(currentIndex - 1);
113                    }
114                });
115                $this.append(prev);
116                
117                var next = $('<a class="wmuSliderNext">' + options.nextText + '</a>');
118                next.click(function(e) {
119                    e.preventDefault();
120                    clearTimeout(slideshowTimeout);
121                    if (currentIndex + 1 == slidesCount) {    
122                        loadSlide(0, true);
123                    } else {
124                        loadSlide(currentIndex + 1);
125                    }
126                });                
127                $this.append(next);
128            }
129            
130
131            /* Pagination Control
132            ================================================== */ 
133            if (options.paginationControl) {
134                paginationControl = $('<ul class="wmuSliderPagination"></ul>');
135                $.each(slides, function(i) {
136                    paginationControl.append('<li><a href="#">

136' + i + '</a></li>');
137                    paginationControl.find('a:eq(' + i + ')').click(function(e) {    
138                        e.preventDefault();
139                        clearTimeout(slideshowTimeout);   
140                        loadSlide(i);
141                    });                
142                });
143                $this.append(paginationControl);
144            }
145            
146            
147            /* Slideshow
148            ================================================== */ 
149            if (options.slideshow) {
150                var slideshow = function() {
151                    if (currentIndex + 1 < slidesCount) {
152                        loadSlide(currentIndex + 1);
153                    } else {
154                        loadSlide(0, true);
155                    }
156                    slideshowTimeout = setTimeout(slideshow, options.slideshowSpeed);
157                }
158                slideshowTimeout = setTimeout(slideshow, options.slideshowSpeed);
159            }
160            
161                        
162            /* Resize Slider
163            ================================================== */ 
164            var resize = function() {
165                var slide = $(slides[currentIndex]);
166                $this.animate({ height: slide.innerHeight() });
167                if (options.animation == 'slide') {
168                    slides.css({
169                        width: $this.width() / options.items
170                    });
171                    wrapper.css({
172                        marginLeft: -$this.width() / options.items * currentIndex,
173                        width: $this.width() * slides.length
174                    });                    
175                }    
176            };
177            
178                        
179            /* Touch
180            ================================================== */
181            var touchSwipe = function(event, phase, direction, distance) {
182                clearTimeout(slideshowTimeout);              
183                if(phase == 'move' && (direction == 'left' || direction == 'right')) {
184                    if (direction == 'right') {
185                        if (currentIndex == 0) {
186                            wrapper.css('marginLeft', (-slidesCount * $this.width() / options.items) + distance);
187                        } else {
188                            wrapper.css('marginLeft', (-currentIndex * $this.width() / options.items) + distance);
189                        }
190                    } else if (direction == 'left') {
191                        wrapper.css('marginLeft', (-currentIndex * $this.width() / options.items) - distance);
192                    }
193                } else if (phase == 'cancel' ) {
194                    if (direction == 'right' && currentIndex == 0) {
195                        wrapper.animate({ marginLeft: -slidesCount * $this.width() / options.items }, options.animationDuration);                
196                    } else {
197                        wrapper.animate({ marginLeft: -currentIndex * $this.width() / options.items }, options.animationDuration);  
198                    }
199                } else if (phase == 'end' ) {
200                    if (direction == 'right') {
201                        if (currentIndex == 0) {
202                            loadSlide(slidesCount - 1, true, true);
203                        } else {
204                            loadSlide(currentIndex - 1);
205                        }
206                    } else if (direction == 'left')    {        
207                        if (currentIndex + 1 == slidesCount) {
208                            loadSlide(0, true);
209                        } else {
210                            loadSlide(currentIndex + 1);
211                        }
212                    } else {
213                        wrapper.animate({ marginLeft: -currentIndex * $this.width() / options.items }, options.animationDuration);
214                    }
215                }            
216            };
217            if (options.touch && options.animation == 'slide') {
218                if (!$.isFunction($.fn.swipe)) {
219                    $.ajax({
220                        url: 'jquery.touchSwipe.min.js',
221                        async: false
222                    });
223                }
224                if ($.isFunction($.fn.swipe)) {
225                    $this.swipe({ triggerOnTouchEnd:false, swipeStatus:touchSwipe, allowPageScroll:'vertical' });
226                }
227            }
228            
229            
230            /* Init Slider
231            ================================================== */ 
232            var init = function() {
233                var slide = $(slides[currentIndex]);
234                var img = slide.find('img');
235                img.load(function() {
236                    wrapper.show();

237                    $this.animate({ height: slide.innerHeight() });
238                });
239                if (options.animation == 'fade') {
240                    slides.css({
241                        position: 'absolute',
242                        width: '100%',
243                        opacity: 0
244                    });
245                    $(slides[currentIndex]).css('position', 'relative');
246                } else if (options.animation == 'slide') {
247                    if (options.items > slidesCount) {
248                        options.items = slidesCount;
249                    }
250                    slides.css('float', 'left');                    
251                    slides.each(function(i){
252                        var slide = $(this);
253                        slide.attr('data-index', i);
254                    });
255                    for(var i = 0; i < options.items; i++) {
256                        wrapper.append($(slides[i]).clone());
257                    }
258                    slides = $this.find(options.slide);
259                }
260                resize();
261                
262                $this.trigger('hasLoaded');
263                
264                loadSlide(currentIndex);
265            }
266            init();
267            
268                                                
269            /* Bind Events
270            ================================================== */
271            // Resize
272            $(window).resize(resize);
273            
274            // Load Slide
275            $this.bind('loadSlide', function(e, i) {
276                clearTimeout(slideshowTimeout);
277                loadSlide(i);
278            });
279                        
280        });
281    }
282    
283})(jQuery);