https://www.sonymusic.dk/wp-content/themes/sony-music/js/carousel-swipe.js

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

139  $.fn.carousel = function() {
140    old.apply(this, arguments);
141    return this.each(function () {
142      var $this   = $(this)
143      var data    = $this.data('bs.carousel.swipe')
144      if (!data) $this.data('bs.carousel.swipe', new CarouselSwipe(this))
145    })
146  }
147
148  $.extend($.fn.carousel,old);
149
150  $.fn.carousel_transition = function(enable) {
151    enable = enable ? '' : 'none';
152    return this.each(function() {
153      $(this)
154        .css('-webkit-transition', enable)
155        .css('transition', enable)
156    })
157  };
158
159}(jQuery);