https://luki.ru/js_src/3936/carousel.js?4272

1var Carousel = Class.create({
2    roller: false,
3    item_width: 0,
4    current: 0,
5    initialize: function(id) {
6
7        var t = this,
8            items = $(id).select('.carusel_item'),
9            bar_items = $(id).select('.luki_carusel_mobile_bar'),
10            current = $(id).attr('data-rand') ? Math.floor(items.length * Math.random()) : 0,
11            interval;
12        this.roller = $(id).select('.luki_carusel_links')[0]
13        this.item_width = items[0].getWidth();
14        var swipeMe = this.roller;
15        new Swipeable(swipeMe, { 'eventsDisabled': ['top', 'down'] });
16
17
18        var that = this;
19
20        swipeMe.observe("swipe:left", function() {
21            i = that.current + 1;
22            t.Move(i);
23        });
24
25        swipeMe.observe("swipe:right", function() {
26            i = that.current - 1;
27            t.Move(i);
28        });
29
30        t.Start = function() {
31            interval = setInterval(function() {
32                if (CORE.isMobile()) {
33                    if (that.current + 1 >= bar_items.length) that.current = -1;
34                    t.Move(that.current + 1);
35                } else
36                    t.Show(items[current + 1]);
37            }, 10000);
38        }
39
40        t.Stop = function() {
41            clearInterval(interval);
42        }
43
44        t.Move = function(i) {
45            if (i < 0) i = 0;
46            if (i >= bar_items.length) return;
47            var item = bar_items[i]
48
49            $(id).select('.luki_carusel_mobile_bar.active').each(function(a) { a.removeClassName('active') });
50            $(item).addClassName('active');
51
52            var n = items.indexOf(item);
53            this.current = i;
54
55            if (CORE.isMobile())
56             this.roller.setStyle({ left: -this.item_width * i + 'px' });
57            else
58             this.roller.setStyle({ left: 'auto' });
59
60            t.Stop();
61            t.Start();
62        }
63        t.onresize = function() {
64            clearTimeout(that.timerId);
65            that.timerId = setTimeout(function() {
66                that.item_width = items[0].getWidth();
67                console.info("onresize_run_", that.item_width);
68                that.Move(that.current);
69            }, 100);
70        }
71        t.Show = function(item, force) {
72            var n = items.indexOf(item);
73
74            if (n === current && !force)
75                return
76            else if (n === -1) {
77                current = 0;
78                item = items[0];
79            } else
80                current = n;
81
82            if (item) {
83                $(id).select('.carusel_item.active').each(function(a) { a.removeClassName('active') });
84                $(item).addClassName('active');
85            }
86        }
87
88        items.each(function(a) {
89            a.observe('mouseenter', function() {
90                t.Show(a);
91                t.Stop();
92            });
93            a.observe('mouseleave', function() { t.Start(); });
94        });
95
96        bar_items.each(function(a, i) {
97            a.observe('click', function() { t.Move(i); });
98        });
99
100
101        t.Show(items[current], true);
102        if (bar_items.length)
103            bar_items[current].addClassName('active');
104        t.Start();
105
106
107        window.addEventListener("orientationchange", t.onresize);
108        window.addEventListener("resize", t.onresize);
109    }
110});
111
112
113window.Swipeable = Class.create({
114
115    initialize: function(el, params) {
116
117        // allow id or DOM object
118        this.el = $(el);
119
120        this.minLength = 70; // allow options object to be passed
121
122        this.startX = null;
123        this.startY = null;
124        this.curX = null;
125        this.curY = null;
126
127        this.el.observe("touchstart", this.onTouchStart.bind(this));
128        this.el.observe("touchmove", this.onTouchMove.bind(this));
129        this.el.observe("touchend", this.onTouchEnd.bind(this));
130        this.el.observe("touchcancel", this.onTouchCancel.bind(this));
131        this.params = { 'eventsDisabled': [] };
132
133        if (params['eventsDisabled']) this.params['eventsDisabled'] = params['eventsDisabled'];
134
135    },
136
137    onTouchStart: function(event) {
138
139        // stop swipe from propogating and scrolling the whole screen (for example)
140        // event.stop();
141
142        // only allow single-touch gestures
143        if (event.touches.length == 1) {
144            this.startX = event.touches[0].pageX;
145            this.startY = event.touches[0].pageY;
146        }
147    },
148
149    onTouchMove: function(event) {
150
151        // event.stop();
152
153        if (event.touches.length == 1) {
154            this.curX = event.touches[0].pageX;
155            this.curY = event.touches[0].pageY;
156        } else {
157            this.onTouchCancel(event);
158        }
159    },
160
161    onTouchEnd: function(event) {
162        let direction = this.getDirection(this.getAngle());
163        var swipeLength;
164
165
166        if (this.params.eventsDisabled.indexOf(direction) != -1) {
167            event.stop();
168        }
169
170        if (!this.curX) {this.el.fire("swipe:tap"); return}
171
172        swipeLength = Math.sqrt(Math.pow(this.curX - this.startX, 2) + Math.pow(this.curY - this.startY, 2));
173
174        if (swipeLength >= this.minLength) {
175            this.el.fire("swipe:" + direction);
176        }
177
178
179        this.resetCoords()
180    },
181
182    onTouchCancel: function(event) {
183        this.resetCoords();
184    },
185
186    getAngle: function() {
187
188        var x, y, r, angle;
189
190        x = this.startX - this.curX;
191        y = this.curY - this.startY;
192
193        r = Math.atan2(y, x);
194
195        //convert radians to degrees
196        angle = Math.round(r * 180 / Math.PI);
197
198        if (angle < 0) {
199            angle = 360 - Math.abs(angle);
200        }
201        return angle;
202    },
203
204    getDirection: function(angle) {
205        var direction;
206
207        if (angle <= 45 && angle >= 0) {
208            direction = "left";
209        } else if (angle <= 360 && angle >= 315) {
210            direction = "left";
211        } else if (angle >= 135 && angle <= 225) {
212            direction = "right";
213        } else if (angle > 45 && angle < 135) {
214            direction = "down";
215        } else {
216            direction = "up";
217        }
218        return direction;
219    },
220
221    resetCoords: function() {
222        this.startX = null;
223        this.startY = null;
224        this.curX = null;
225        this.curY = null;
226    }
227});