https://www.markt-obersinn.de/__/scripts/relaunch2016/slider.js

1(function($) {
2
3    var Slider = (function(element, options){
4
5        function _Slider(element, options) {
6            //Default settings
7            this.defaults = {
8                wrapper: '.wrapper',
9                slider: '.slider',
10                slides: '.slides',
11                slide: '.slide',
12                slideInterval: 3000,
13                animation: 'slide',   //Animation Style (slide, fade)
14                animationSpeed: 1000,
15                arrowRight: '.arrow-right',
16                arrowLeft: '.arrow-left'
17            };
18            //Merge default settings with user settings
19            this.settings = $.extend(true, {}, this.defaults, options);
20
21            //Variables
22            this.currSlide= 0;
23            this.$currSlide = null;
24            this.totalSlides = false;
25
26            //DOM Reference to the passed in element
27            this.$el = $(element);
28
29            // Ensure that "this" always references the Slider!
30            this.changeSlide = $.proxy(this.changeSlide, this);
31
32            //Let's go!
33            this.init();
34        }
35
36        return _Slider;
37
38    })();
39
40    /**
41     * Called once per instance
42     * Calls starter methods and initializes the Slider
43     * @params void
44     * @returns void
45     */
46    Slider.prototype.init = function(){
47        //Amount of Slides
48        this.totalSlides = this.$el.find(this.settings.slide).length;
49        //Handle events (eg. clicking arrows)
50        this.events();
51        //Activate the slider
52        this.activate();
53        //Start the loop timer
54        this.initTimer();
55    };
56
57    /**
58     * Activate the first slide.
59     * @params void
60     * @returns void
61     */
62    Slider.prototype.activate = function() {
63        this.$currSlide = this.$el.find(this.settings.slide).eq(0);
64    };
65
66    /**
67     * Manage Events
68     */
69    Slider.prototype.events = function() {
70        $('body')
71            .on('click', this.settings.arrowRight, {direction:'right'}, this.changeSlide)
72            .on('click', this.settings.arrowLeft, {direction:'left'}, this.changeSlide);
73    };
74
75    /**
76     * TIMER
77     * Reset the timer
78     * @params void
79     * @returns void
80     */
81    Slider.prototype.resetTimer = function() {
82        if (this.timer) {
83            clearInterval(this.timer);
84        }
85    };
86
87    /**
88     * TIMER
89     * Initialize the timer
90     * @params void
91     * @returns void
92     */
93    Slider.prototype.initTimer = function() {
94        this.timer = setInterval(this.changeSlide, this.settings.slideInterval);
95    };
96
97    /**
98     * TIMER
99     * Start the timer
100     * Reset throttle
101     * @params void
102     * @returns void
103     */
104    Slider.prototype.startTimer = function() {
105        this.initTimer();
106        this.throttle = false;
107    };
108
109    /**
110     * MAIN LOGIC
111     * @params object event
112     * @returns void
113     */
114    Slider.prototype.changeSlide = function(e){
115        //One animation at a time!
116        if (this.throttle) {
117            return;
118        }
119        this.throttle = true;
120
121        //Stop timer while the animation is carried out
122        this.resetTimer();
123
124        //Animation direction
125        var direction = this._direction(e);
126
127        //Get next slide
128        var animate = this._next(e, direction);
129        if (!animate) {
130            return;
131        }
132
133        //Scroll next slide into view
134        var $nextSlide = this.$el.find(this.settings.slide).eq(this.currSlide);
135        this._jsAnimation($nextSlide, direction, this.settings.animation);
136    };
137
138    /**
139     * Return the animation direction | right or left
140     * @params object event
141     * @returns animation direction
142     */
143    Slider.prototype._direction = function(e) {
144        var direction;
145
146        //Default = right
147        if(typeof e !== 'undefined'){
148            direction = (typeof e.data === 'undefined' ? 'right' : e.data.direction);
149        } else {
150            direction = 'right';
151        }
152        return direction;
153    };
154
155    /**
156     * Get the next slide
157     * @params object event
158     * @params string direction
159     * @returns boolean continue animation?
160     */
161    Slider.prototype._next = function(e, direction) {
162        switch(true) {
163            case(direction == 'right' && this.currSlide < (this.totalSlides - 1)):
164                this.currSlide++;
165                break;
166            case(direction == 'right'):
167                this.currSlide = 0;
168                break;
169            case(direction == 'left' && this.currSlide === 0):
170                this.currSlide = (this.totalSlides - 1);
171                break;
172            case(direction == 'left'):
173                this.currSlide--;
174                break;
175        }
176        return true;
177    };
178
179    /**
180     * JS Animation
181     * @params object the next slide to slide into view
182     * @params string direction
183     * @params string animation
184     * @returns void
185     */
186    Slider.prototype._jsAnimation = function($nextSlide, direction, animation) {
187        //Cache this reference
188        var _ = this;
189
190        switch(animation) {
191            case 'slide':
192                $nextSlide.addClass(direction + ' active');
193                if(direction == 'right') {
194                    _.$currSlide.addClass('js-reset-left');
195                }
196
197                var animation = {};
198                animation[direction] = '0%';
199
200                var animationPrev = {};
201                animationPrev[direction] = '100%';
202
203                //Animation: Current Slide
204                this.$currSlide.animate(animationPrev, this.settings.animationSpeed);
205
206                //Animation: Next Slide
207                $nextSlide.animate(animation, this.settings.animationSpeed, 'swing', function(){
208                    //Get rid of unneeded classes
209                    _.$currSlide.removeClass('active js-reset-left').attr('style', '');
210                    //Cache next slide
211                    _.$currSlide = $nextSlide.removeClass(direction).attr('style','');
212                    _.startTimer();
213                });
214                break;
215
216            case 'fade':
217                this.$currSlide.animate({opacity: 0}, this.settings.animationSpeed);
218                $nextSlide.animate({opacity: 1}, this.settings.animationSpeed, function() {
219                    $nextSlide.addClass('active');
220                    _.$currSlide.removeClass('active').attr('style', '');
221                    _.$currSlide = $nextSlide.attr('style', '');
222                    _.startTimer();
223                });
224                break;
225        }
226    };
227
228    /**

229     * Initialize the plugin for each DOM object passed to jQuery
230     * @params object  options
231     * @returns Slider
232     */
233    $.fn.Slider = function(options) {
234
235        return this.each(function(index, el) {
236            el.Slider = new Slider(el, options);
237        });
238
239    };
240
241}(jQuery));
242
243
244$(document).ready(function(){
245    $('.slide').eq(0).addClass('active');
246    $('.folgeseite-slide').eq(0).addClass('active');
247
248    var sliderConfig = {
249        wrapper: '#kopfslider-wrapper',
250        slider: '.slider',
251        slides: '.slides',
252        slide: '.slide',
253        slideInterval: 5000,
254        animation: 'fade',
255        animationSpeed: 2000
256    }
257
258    $('.slider').Slider(sliderConfig);
259
260    var folgeseiteSliderConfig = {
261        wrapper: '#kopfslider-wrapper',
262        slider: '.folgeseite-slider',
263        slides: '.slides',
264        slide: '.slide',
265        slideInterval: 5000,
266        animation: 'fade',
267        animationSpeed: 2000
268    }
269
270    $('.folgeseite-slider').Slider(folgeseiteSliderConfig);
271
272});