https://heybarak.com/assets/js/root/tweencarousel.js?v=6

1class TweenCarousel {
2    constructor(options) {
3        var containerId = options.containerId.replace(/#/g, "");
4        this.selectedContainer = document.getElementById(containerId);
5        this.targetCarousel = options.targetCarousel || '#carousel';
6        this.carouselMain = this.selectedContainer.querySelector(this.targetCarousel);
7        this.carouselFullBg = this.selectedContainer.querySelector('#fullBgCarousel');
8        this.carouselIndicators = this.carouselMain.querySelector('.carousel-indicators');
9        this.carouselInner = this.carouselMain.querySelector('.carousel-inner');
10        this.animationDelay = options.animationDelay || 3000;
11        this.animationDuration = options.animationDuration || 600;
12        this.totalCount = this.carouselIndicators ? (this.carouselIndicators.querySelectorAll('li').length || options.totalCount) : 0;
13        this.startIndex = options.startIndex || 1;
14        this.autoSlide = options.autoSlide !== undefined ? options.autoSlide : true;
15        this.slideTimeout = null;
16        this.pendingSlideArray = [];
17        this.isDelayStart = 1;
18        this.inArea = false;
19        this.isSliding = false;
20        this.isDragging = false;
21        this.isSchedule = false;
22        this.lastClientX = 0;
23        this.init();
24    }
25    init() {
26        this.controlSlide(true);
27        this._bindEvents();
28        if (this.carouselIndicators) this.carouselIndicators.style.display = 'block';
29    }
30
31    _bindEvents() {
32        this.carouselMain.addEventListener('mouseenter', function () {
33            this.inArea = true;
34            this.controlSlide(false);
35        }.bind(this));
36
37        this.carouselMain.addEventListener('mouseleave', function () {
38            this.inArea = false;
39            this.isDragging = false;
40            this.controlSlide(true);
41        }.bind(this));
42
43        this.carouselMain.addEventListener('mousedown', function (e) {
44            e.preventDefault();
45            this.isDragging = true;
46            this.lastClientX = e.clientX;
47            this.controlSlide(false);
48        }.bind(this));
49
50        this.carouselMain.addEventListener('touchstart', function (e) {
51            this.isDragging = true;
52            this.lastClientX = e.touches[0].pageX;
53            this.controlSlide(false);
54        }.bind(this), { passive: true });
55
56        const onMove = function (e) {
57            if (!this.isDragging) return;
58            e.preventDefault();
59            this.carouselInner.querySelectorAll('.item')
60                .forEach(function (el) { el.style.pointerEvents = 'none'; });
61        }.bind(this);
62
63        const onMoveEnd = function (e) {
64            if (!this.isDragging) return;
65            this.isDragging = false;
66            const clientX = e.clientX !== undefined ? e.clientX : e.changedTouches[0].clientX;
67            const distance = clientX - this.lastClientX;
68            if (Math.abs(distance) > 20) {
69                if (distance > 0) {
70                    this.sliding(this.startIndex - 1);
71                } else {
72                    this.sliding(this.startIndex + 1);
73                }
74            }
75            this.carouselInner.querySelectorAll('.item')
76                .forEach(function (el) { el.style.pointerEvents = ''; });
77            this.controlSlide(true);
78        }.bind(this);
79
80        this.carouselMain.addEventListener('mousemove', onMove);
81        this.carouselMain.addEventListener('touchmove', onMove, { passive: false });
82        this.carouselMain.addEventListener('mouseup', onMoveEnd);
83        this.carouselMain.addEventListener('touchend', onMoveEnd);
84
85        if (this.carouselIndicators) {
86            this.carouselIndicators.querySelectorAll('.indicator').forEach(function (indicator) {
87                indicator.addEventListener('click', function (e) {
88                    e.stopPropagation();
89                    const index = parseInt(e.currentTarget.getAttribute('data-index'));
90                    if (index) {
91                        this.controlSlide(false);
92                        this.sliding(index);
93                        setTimeout(function () {
94                            if (this.autoSlide && !this.inArea) {
95                                this.controlSlide(true);
96                            }
97                        }.bind(this), this.animationDelay);
98                    }
99                }.bind(this));
100            }.bind(this));
101        }
102
103    }
104
105    controlSlide(run) {
106        this.carouselInner.querySelectorAll('.item')
107            .forEach(function (el) { el.style.pointerEvents = ''; });
108        if (run && this.totalCount > 1 && this.autoSlide) {
109            if (!this.inArea && !this.isDragging && !this.isSchedule && this.animationDelay > 0) {
110                this.isSchedule = true;
111                clearTimeout(this.slideTimeout);
112                this.slideTimeout = setTimeout(function () {
113                    this.sliding(this.startIndex + 1, true);
114                }.bind(this), this.animationDelay);
115            }
116        } else {
117            this.isSchedule = false;
118            clearTimeout(this.slideTimeout);
119        }
120    }
121
122    sliding(index, isAuto = false) {
123        if (this.isSliding) {
124            this.pendingSlideArray.push(index);
125            return;
126        }
127        if (index < 1) index = this.totalCount;
128        else if (index > this.totalCount) index = 1;
129        if (index === this.startIndex) return;
130        this.controlSlide(false);
131        this.isSliding = true;
132        const currentItem = this.carouselInner.querySelector(`.item${this.startIndex}`);
133        const nextItem = this.carouselInner.querySelector(`.item${index}`);
134        const direction = (isAuto ||
135            (!(index === this.totalCount && this.startIndex === 1) && index > this.startIndex) ||
136            (index === 1 && this.startIndex === this.totalCount)) ? "next" : "prev";
137        this._animateSlide(currentItem, nextItem, direction, index);
138        if (this.carouselIndicators) {
139            this.carouselIndicators.querySelector('.indicator.active').classList.remove("active");
140            this.carouselIndicators.querySelector(`.indicator${index}`).classList.add("active");
141        } 
142        if (this.carouselFullBg) {
143            this.carouselFullBg.querySelector('.item.active').classList.remove("active");
144            this.carouselFullBg.querySelector(`.item${index}`).classList.add("active");
145        }
146    }
147
148    _animateSlide(currentItem, nextItem, direction, newIndex) {
149        nextItem.classList.add('active');
150        nextItem.style.position = 'absolute';
151        nextItem.style.top = '0px';
152        nextItem.style.left = direction === 'next' ? '100%' : '-100%';
153        nextItem.style.width = '100%';
154        void nextItem.offsetHeight;
155        currentItem.style.transition = `left ${this.animationDuration}ms ease-in-out`;
156        nextItem.style.transition = `left ${this.animationDuration}ms ease-in-out`;
157        currentItem.style.left = direction === 'next' ? '-100%' : '100%';
158        nextItem.style.left = '0';
159        const onAnimationEnd = () => {
160            currentItem.style.transition = '';
161            nextItem.style.transition = '';
162            currentItem.style.left = '';
163            nextItem.style.position = '';
164            nextItem.style.top = '';
165            nextItem.style.left = '';
166            nextItem.style.width = '';
167            currentItem.classList.remove('active');
168            this.slidingComplete(newIndex);
169        };
170        setTimeout(onAnimationEnd, this.animationDuration);
171    }
172
173    slidingComplete(index) {
174        this.startIndex = index;
175        const items = this.carouselInner.querySelectorAll('.item');

176        items.forEach(el => el.classList.remove('active'));
177        const activeItem = this.carouselInner.querySelector(`.item${this.startIndex}`);
178        if (activeItem) activeItem.classList.add('active');
179        this.isSliding = false;
180        if (this.pendingSlideArray.length > 0) {
181            this.sliding(this.pendingSlideArray.shift());
182        } else {
183            this.controlSlide(true);
184        }
185    }
186
187    destroy() {
188        clearTimeout(this.slideTimeout);
189    }
190
191    reset() {
192        clearTimeout(this.slideTimeout);
193        this.isSchedule = false;
194        this.isSliding = false;
195        this.pendingSlideArray = [];
196        this.isDragging = false;
197        this.startIndex = 1;
198        const items = this.carouselInner.querySelectorAll('.item');
199        items.forEach(el => {
200            el.classList.remove('active');
201            el.style.transition = '';
202            el.style.position = '';
203            el.style.top = '';
204            el.style.left = '';
205            el.style.width = '';
206        });
207        const first = this.carouselInner.querySelector('.item1');
208        if (first) first.classList.add('active');
209        if (this.carouselIndicators) {
210            this.carouselIndicators.querySelectorAll('.indicator')
211                .forEach(el => el.classList.remove('active'));
212            const firstInd = this.carouselIndicators.querySelector('.indicator1');
213            if (firstInd) firstInd.classList.add('active');
214        }
215        if (this.carouselFullBg) {
216            this.carouselFullBg.querySelectorAll('.item')
217                .forEach(el => el.classList.remove('active'));
218            const firstBg = this.carouselFullBg.querySelector('.item1');
219            if (firstBg) firstBg.classList.add('active');
220        }
221    }
222
223}