https://www.floridienne.be/wp-content/themes/floridienne/js/customSlider.js

1(function ($) {
2    var customSlider = function (jQuerySelector, navigation) {
3        var self = this;
4        var $container = $(jQuerySelector);
5        var dataOps = $container.data();
6
7        this.timer = null;
8        this.$slider = $container.find(".carousel");
9        this.$navigation = $container.find('.customSlider-navigation');
10        this.speed = dataOps.speed || 300;
11        this.delay = dataOps.delay && dataOps.delay > this.speed ? dataOps.delay : 6000;
12        this.$activeSlide = this.$slider.find(".slide.active");
13
14        this.init = function() {
15            this.updateSliderWidth();
16            this.positionSliderToActiveSlide();
17            this.$navigation.on("click", "div", function (event) {
18                event.preventDefault();
19                self.goto($(this).find("a").data("slidename"));
20                return false;
21            });
22            this.play();
23        };
24
25        this.getSlides = function () {
26            return this.$slider.find('.slide');
27        };
28
29        this.updateSliderWidth = function () {
30            return this.$slider.width(this.getSlides().width() * this.getSlides().length);
31        };
32
33        this.positionSliderToActiveSlide = function() {
34            if ( this.$activeSlide.length > 0 ) {
35                 this.$slider.css({left: -this.$activeSlide.position().left});
36            }
37        };
38
39        this.goto = function (name) {
40            var $elem = this.getSlides().filter('[data-slidename=' + name + ']');
41            var newPos = -$elem.position().left;
42            var currentPos = parseInt(this.$slider.css('left'));
43            var $duplicatedSlide;
44
45            if (newPos === currentPos) {
46                return;
47            } else if (newPos > currentPos) {
48                $duplicatedSlide = this.getSlides().last();
49                this.$slider.prepend($duplicatedSlide.clone(true, true));
50            } else if (newPos < currentPos) {
51                $duplicatedSlide = this.getSlides().first();
52                this.$slider.append($duplicatedSlide.clone(true, true));
53            }
54
55            this.updateSliderWidth();
56            this.positionSliderToActiveSlide();
57

58            this.getSlides().removeClass('active');
59            this.$navigation.find("div").removeClass('active');
60            this.$navigation.find("a").filter('[data-slidename=' + name + ']').parent().addClass("active");
61
62            $elem.addClass("active");
63
64            this.$slider.animate({left: -$elem.position().left}, this.speed, function () {
65                self.$activeSlide = $elem;
66                $duplicatedSlide.remove();
67                self.updateSliderWidth();
68                self.positionSliderToActiveSlide();
69            });
70        };
71
72        this.stop = function () {
73            clearInterval(this.timer);
74            this.timer = null;
75        };
76
77
78         this.play = function () {
79             clearInterval(this.timer);
80
81             this.timer = setInterval(function () {
82                var name = self.$activeSlide.next().data("slidename");
83                self.goto(name);
84             }, this.delay);
85         };
86
87        this.init();
88    };
89
90    var customSlider = new customSlider('#carousel-wrapper');
91
92}(jQuery));