https://vfwsc.org/di/vfw/v2/assets/bootstrap-carousel-swipe/bootstrap-carousel-swipe.js

1/* source: https://github.com/avinoamr/bootstrap-carousel-swipe */
2/* changes from Mobirise team */
3+function ($) {
4    'use strict';
5
6    if ( !$.fn.carousel ) {
7        return
8    }
9
10    // CAROUSEL CLASS DEFINITION
11    // =========================
12
13    var CarouselSwipe = function(element) {
14        this.$element    = $(element)
15        this.carousel    = this.$element.data('bs.carousel')
16        this.options     = $.extend({}, CarouselSwipe.DEFAULTS, this.carousel.options)
17        this.startX      =
18        this.startY      =
19        this.startTime   =
20        this.cycling     =
21        this.$active     =
22        this.$items      =
23        this.$next       =
24        this.$prev       = 
25        this.dx          = null
26
27        this.$element
28            .on('touchstart', $.proxy(this.touchstart,this))
29            .on('touchmove', $.proxy(this.touchmove,this))
30            .on('touchend', $.proxy(this.touchend,this))
31    }
32
33    CarouselSwipe.DEFAULTS = {
34        swipe: 50 // percent per second
35    }
36
37    CarouselSwipe.prototype.touchstart = function(e) {
38        if (!this.options.swipe) return;
39        var touch = e.originalEvent.touches ? e.originalEvent.touches[0] : e
40        this.dx = 0
41        this.startX = touch.pageX
42        this.startY = touch.pageY
43        this.cycling = null
44        this.width = this.$element.width()
45        this.startTime = e.timeStamp
46    }
47
48    CarouselSwipe.prototype.touchmove = function(e) {
49        if (!this.options.swipe) return;
50        var touch = e.originalEvent.touches ? e.originalEvent.touches[0] : e
51        var dx = touch.pageX - this.startX
52        var dy = touch.pageY - this.startY
53        if (Math.abs(dx) < Math.abs(dy)) return; // vertical scroll
54
55        if ( this.cycling === null ) {
56            this.cycling = !!this.carousel.interval
57            this.cycling && this.carousel.pause()
58        }
59
60        e.preventDefault()
61        this.dx = dx / (this.width || 1) * 100
62        this.swipe(this.dx)
63    }
64
65    CarouselSwipe.prototype.touchend = function(e) {
66        if (!this.options.swipe) return;
67        if (!this.$active) return; // nothing moved
68        var all = $()
69            .add(this.$active).add(this.$prev).add(this.$next)
70            .carousel_transition(true)
71
72        var dt = (e.timeStamp - this.startTime) / 1000
73        var speed = Math.abs(this.dx / dt) // percent-per-second
74        if (this.dx > 40 || (this.dx > 0 && speed > this.options.swipe)) {
75            this.carousel.prev()
76        } else if (this.dx < -40 || (this.dx < 0 && speed > this.options.swipe)) {
77            this.carousel.next();
78        } else {
79            this.$active
80                .one($.support.transition.end, function () {
81                    all.removeClass('prev next')
82                })
83                .emulateTransitionEnd(this.$active.css('transition-duration').slice(0, -1) * 1000)
84        }
85
86        all.carousel_offset(false);
87        this.cycling && this.carousel.cycle()
88        this.$active = null // reset the active element
89    }
90
91    CarouselSwipe.prototype.swipe = function(percent) {
92        var $active = this.$active || this.getActive()
93        if (percent < 0) {
94            this.$prev
95                .carousel_offset(false)
96                .removeClass('prev')
97                .carousel_transition(true)
98            if (!this.$next.length || this.$next.hasClass('active')) return
99            this.$next
100                .carousel_transition(false)
101                .addClass('next')
102                .carousel_offset(percent + 100)
103        } else {
104            this.$next
105                .carousel_offset(false)
106                .removeClass('next')
107                .carousel_transition(true)
108            if (!this.$prev.length || this.$prev.hasClass('active')) return
109            this.$prev
110                .carousel_transition(false)
111                .addClass('prev')
112                .carousel_offset(percent - 100)
113        }
114
115        $active
116            .carousel_transition(false)
117            .carousel_offset(percent)
118    }
119
120    CarouselSwipe.prototype.getActive = function() {
121        this.$active = this.$element.find('.item.active')
122        this.$items = this.$active.parent().children()
123
124        this.$next = this.$active.next()
125        if (!this.$next.length && this.options.wrap) {
126            this.$next = this.$items.first();
127        }
128
129        this.$prev = this.$active.prev()
130        if (!this.$prev.length && this.options.wrap) {

131            this.$prev = this.$items.last();
132        }
133
134        return this.$active;
135    }
136
137    // CAROUSEL PLUGIN DEFINITION
138    // ==========================
139
140    var old = $.fn.carousel
141    $.fn.carousel = function() {
142        old.apply(this, arguments);
143        return this.each(function () {
144            var $this   = $(this)
145            var data    = $this.data('bs.carousel.swipe')
146            if (!data) $this.data('bs.carousel.swipe', new CarouselSwipe(this))
147        })
148    }
149
150    $.extend($.fn.carousel,old);
151
152    $.fn.carousel_transition = function(enable) {
153        enable = enable ? '' : 'none';
154        return this.each(function() {
155            $(this)
156                .css('-webkit-transition', enable)
157                .css('transition', enable)
158        })
159    };
160
161
162    var support3dtransform = (function() {
163        if (!window.getComputedStyle) {
164            return false;
165        }
166
167        var el = document.createElement('p'), 
168            has3d,
169            transforms = {
170                'webkitTransform':'-webkit-transform',
171                'OTransform':'-o-transform',
172                'msTransform':'-ms-transform',
173                'MozTransform':'-moz-transform',
174                'transform':'transform'
175            };
176
177        // Add it to the body to get the computed style.
178        document.body.insertBefore(el, null);
179
180        for (var t in transforms) {
181            if (el.style[t] !== undefined) {
182                el.style[t] = "translate3d(1px,1px,1px)";
183                has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
184            }
185        }
186
187        document.body.removeChild(el);
188
189        return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
190    }());
191
192    $.fn.carousel_offset = function(value) {
193        return this.each(function() {
194            if(value) {
195                if(support3dtransform) {
196                    $(this).css('transform', 'translate3d(' + value + '%, 0, 0)')
197                } else {
198                    $(this).css('left', value + '%')
199                }
200            } else {
201                $(this).css({
202                    transform: '',
203                    left: ''
204                })
205            }
206        })
207    };
208
209    // init carousels
210    $('.carousel').carousel();
211
212}(jQuery);