https://camping-luginsland.de/assets/sqwplugintouchslider.js

1(function($) {
2  'use strict';
3  $.fn.sqrslider = function() {
4    $(this).each(function() {
5      var container = $(this);
6      var ul = container.find('ul');
7      var lis = container.find('li');
8      var bullets;
9      var imgs = container.find('img');
10      var ratio = parseInt(imgs.attr('width'), 10) / parseInt(imgs.attr('height'), 10);
11      var drag = false;
12      var lastx = 0;
13      var newx = 0;
14      var offset = 0;
15      var width;
16      var height;
17      var blockscroll = false;
18      var flicktimer;
19      var flick = false;
20      var index = 0;
21
22      function size() {
23        width = container.width();
24        height = Math.floor(width / ratio);
25
26        container.css('height', height);
27        lis.css({
28          'width': width + 'px',
29          'height': height + 'px'
30        });
31        imgs.css({
32          'width': width + 'px',
33          'height': height + 'px'
34        });
35        ul.css({
36          'width': (width * lis.length) + 'px',
37          'height': height + 'px'
38        });
39
40        setIndex(false);
41      }
42
43      function releaseFlick() {
44        flick = false;
45      }
46
47
48      function handleStart(x) {
49        drag = true;
50        lastx = x;
51        newx = lastx;
52        blockscroll = false;
53        flick = true;
54
55        if (flicktimer !== undefined) clearTimeout(releaseFlick);
56
57        setTimeout(releaseFlick, 250);
58      }
59
60      function handleEnd() {
61        drag = false;
62
63        if (flick && Math.abs(newx - lastx) > 50) {
64          if (newx > lastx) {
65            index--;
66          } else {
67            index++;
68          }
69        } else {
70          index = Math.round((offset + lastx - newx) / width);
71        }
72
73        if (index < 0) index = 0;
74        if (index > lis.length - 1) index = lis.length - 1;
75
76        setIndex(true);
77      }
78
79      function setIndex(animate) {
80        offset = index * width;
81
82        ul.css({
83          'transition': (animate) ? 'transform 0.3s ease' : 'none',
84          'transform': 'translateX(' + (-offset) + 'px)'
85        });
86
87        bullets.removeClass('sqrsliderbulletactive').eq(index).addClass('sqrsliderbulletactive');
88      }
89
90      function handleMove(x) {
91        if (drag) {
92
93          newx = x;
94
95          var translate = offset + lastx - newx;
96          if (translate < 0) translate = 0;
97          if (translate > width * (lis.length - 1)) translate = width * (lis.length - 1);
98
99          ul.css({
100            'transition': 'none',
101            'transform': 'translateX(' + (-translate) + 'px)'
102          });
103
104          if (Math.abs(newx - lastx) > 50) blockscroll = true;
105        }
106      }
107
108      function handleTouchEnd(e) {
109        handleEnd();
110      }
111
112      function handleTouchMove(e) {
113        if (e.originalEvent.touches.length == 1) {
114          handleMove(e.originalEvent.touches[0].pageX);
115          if (blockscroll && e.cancelable) e.preventDefault();
116        }
117      }
118
119      function handleTouchStart(e) {
120        if (e.originalEvent.touches.length == 1) {
121          handleStart(e.originalEvent.touches[0].pageX);
122          if (navigator.userAgent.indexOf('Android 4') !== -1) e.preventDefault();
123        }
124      }
125
126      function handleMouseDown(e) {
127        e.preventDefault();
128        e.stopPropagation();
129        e.stopImmediatePropagation();
130        handleStart(e.pageX);
131      }
132
133      function handleMouseMove(e) {
134        e.preventDefault();
135        e.stopPropagation();
136        e.stopImmediatePropagation();
137        handleMove(e.pageX);
138      }
139
140      function handleMouseUp(e) {
141        e.preventDefault();
142        e.stopPropagation();
143        e.stopImmediatePropagation();
144        handleEnd();
145      }
146
147      function createBullets() {
148        var bulletsUl = $('<ul>', {
149          'class': 'sqrsliderbullets'
150        });
151        for (var i = 0; i < lis.length; i++) {
152          bulletsUl.append($('<li>'));
153        }
154        bulletsUl.css('width', lis.length * 25 + 'px');
155        bulletsUl.insertAfter(container);
156        bullets = bulletsUl.children('li');
157      }
158
159      function handleClick() {
160        index = $(this).index();
161        setIndex(true);
162      }
163
164      createBullets();
165      size();
166
167      imgs.on('mousedown', handleMouseDown);

168      imgs.on('mouseup', handleMouseUp);
169      imgs.on('mousemove', handleMouseMove);
170      imgs.on('touchstart', handleTouchStart);
171      imgs.on('touchend', handleTouchEnd);
172      imgs.on('touchmove', handleTouchMove);
173
174      bullets.on('click', handleClick);
175      $(window).on('resize', size);
176    });
177  };
178})(jQuery);
179
180$(document).ready(function() {
181  $('.sqrslider').sqrslider();
182});