https://www.xovient.ai/assets/js/index-slider.js

1    /*-----------------------------------------------------------*/
2    /* Custom JS for Home Slider
3    /*-----------------------------------------------------------*/
4
5    const slider = document.getElementById('slider');
6    const pagination = document.getElementById('pagination');
7    const slideElements = Array.from(slider.children);
8    const totalSlides = slideElements.length;
9
10    const firstClone = slideElements[0].cloneNode(true);
11    const lastClone = slideElements[totalSlides - 1].cloneNode(true);
12
13    slider.appendChild(firstClone);
14    slider.insertBefore(lastClone, slider.firstChild);
15
16    let index = 1;
17    let isTransitioning = false;
18    let autoSlideInterval;
19    let touchStartX = 0;
20    let touchEndX = 0;
21    let mouseStartX = 0;
22    let mouseEndX = 0;
23    let isDragging = false;
24
25    function updateSlider() {
26      isTransitioning = true;
27      slider.style.transition = 'transform 1s ease';
28      slider.style.transform = `translateX(-${index * 100}%)`;
29      updateDots();
30    }
31
32    function createDots() {
33      pagination.innerHTML = '';
34      for (let i = 0; i < totalSlides; i++) {
35        const dot = document.createElement('div');
36        dot.classList.add('dot');
37        dot.dataset.index = i + 1;
38        pagination.appendChild(dot);
39      }
40      updateDots();
41
42      document.querySelectorAll('.dot').forEach(dot => {
43        dot.addEventListener('click', () => {
44          if (isTransitioning) return;
45          index = parseInt(dot.dataset.index);
46          updateSlider();
47          resetInterval();
48        });
49      });
50    }
51
52    function updateDots() {
53      const dots = document.querySelectorAll('.dot');
54      dots.forEach(dot => dot.classList.remove('active'));
55      const realIndex = (index - 1 + totalSlides) % totalSlides;
56      if (dots[realIndex]) {
57        dots[realIndex].classList.add('active');
58      }
59    }
60
61    slider.addEventListener('transitionend', () => {
62      isTransitioning = false;
63      if (index === 0) {
64        slider.style.transition = 'none';
65        index = totalSlides;
66        slider.style.transform = `translateX(-${index * 100}%)`;
67      } else if (index === totalSlides + 1) {
68        slider.style.transition = 'none';
69        index = 1;
70        slider.style.transform = `translateX(-${index * 100}%)`;
71      }
72    });
73
74    function autoSlide() {
75      if (isTransitioning) return;
76      index++;
77      updateSlider();
78    }
79
80    function resetInterval() {
81      clearInterval(autoSlideInterval);
82      autoSlideInterval = setInterval(autoSlide, 5000);
83    }
84
85    // Navigation Arrow Controls
86    const prevButton = document.querySelector('.slider-nav .prev');
87    const nextButton = document.querySelector('.slider-nav .next');
88
89    if (prevButton) {
90      prevButton.addEventListener('click', () => {
91        if (isTransitioning) return;
92        index--;
93        updateSlider();
94        resetInterval();
95      });
96    }
97
98    if (nextButton) {
99      nextButton.addEventListener('click', () => {
100        if (isTransitioning) return;
101        index++;
102        updateSlider();
103        resetInterval();
104      });
105    }
106
107    // Mobile Swipe Support
108    slider.addEventListener('touchstart', (e) => {
109      touchStartX = e.changedTouches[0].screenX;
110    });
111
112    slider.addEventListener('touchend', (e) => {
113      if (isTransitioning) return;
114      touchEndX = e.changedTouches[0].screenX;
115      const swipeDistance = touchEndX - touchStartX;
116      if (swipeDistance > 50) { // Swipe right (previous)
117        index--;
118        updateSlider();
119        resetInterval();
120      } else if (swipeDistance < -50) { // Swipe left (next)
121        index++;
122        updateSlider();
123        resetInterval();
124      }
125    });
126
127    // Mouse Drag Support
128    slider.addEventListener('mousedown', (e) => {
129      e.preventDefault(); // Prevent text selection
130      isDragging = true;
131      mouseStartX = e.clientX;
132    });
133
134    document.addEventListener('mousemove', (e) => {
135      if (!isDragging) return;
136      mouseEndX = e.clientX;
137    });
138
139    document.addEventListener('mouseup', (e) => {
140      if (!isDragging) return;
141      isDragging = false;

142      if (isTransitioning) return;
143      const dragDistance = mouseEndX - mouseStartX;
144      if (dragDistance > 50) { // Drag right (previous)
145        index--;
146        updateSlider();
147        resetInterval();
148      } else if (dragDistance < -50) { // Drag left (next)
149        index++;
150        updateSlider();
151        resetInterval();
152      }
153    });
154
155    // Prevent drag on mobile to avoid conflicts
156    slider.addEventListener('touchstart', () => {
157      isDragging = false; // Disable mouse drag during touch
158    });
159
160    document.addEventListener('DOMContentLoaded', () => {
161      createDots();
162      slider.style.transform = `translateX(-${index * 100}%)`;
163      autoSlideInterval = setInterval(autoSlide, 5000);
164    });