figma_apd_mob_05

main.js

@@ -22,7 +22,12 @@ document.addEventListener('DOMContentLoaded', () => {
   accordion.after(dotsContainer);
 
   let dots = [];
-  let isMobile = false; // флаг режима
+  let isMobile = false;
+  let currentIndex = 0;
+
+  // Свайп
+  let startX = 0;
+  let endX = 0;
 
   // === СОЗДАНИЕ ТОЧЕК ===
   function createDots() {
@@ -47,15 +52,15 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     dots.forEach(dot => dot.classList.remove('active'));
-    dots[index].classList.add('active');
+    if (dots[index]) dots[index].classList.add('active');
   }
 
   // === АКТИВАЦИЯ СЛАЙДЕРА НА МОБИЛЬНОМ ===
   function enableSlider() {
     isMobile = true;
-    items.forEach(item => item.classList.add('active')); // все раскрыты
+    items.forEach(item => item.classList.add('active'));
     createDots();
-    let currentIndex = 0;
+    currentIndex = 0;
     showSlide(currentIndex);
 
     dots.forEach((dot, i) => {
@@ -65,6 +70,28 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     });
 
+    // свайпы
+    accordion.addEventListener('touchstart', (e) => {
+      startX = e.touches[0].clientX;
+    });
+
+    accordion.addEventListener('touchmove', (e) => {
+      endX = e.touches[0].clientX;
+    });
+
+    accordion.addEventListener('touchend', () => {
+      if (!isMobile) return;
+      const diff = endX - startX;
+      if (Math.abs(diff) > 50) {
+        if (diff > 0) {
+          currentIndex = (currentIndex - 1 + items.length) % items.length;
+        } else {
+          currentIndex = (currentIndex + 1) % items.length;
+        }
+        showSlide(currentIndex);
+      }
+    });
+
     dotsContainer.style.display = 'flex';
   }
 
@@ -73,16 +100,13 @@ document.addEventListener('DOMContentLoaded', () => {
     isMobile = false;
     dotsContainer.style.display = 'none';
 
-    // Убираем все active
     items.forEach(item => {
       item.classList.remove('active');
       item.style.display = 'flex';
     });
 
-    // Первая вкладка активна по умолчанию
     if (items.length > 0) items[0].classList.add('active');
 
-    // Поведение аккордеона
     items.forEach(item => {
       item.onclick = () => {
         if (!isMobile) {
@@ -104,7 +128,6 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
-  // Инициализация
   checkWidth();
   window.addEventListener('resize', checkWidth);
 });
@@ -115,11 +138,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
   cards.forEach(card => {
     card.addEventListener('click', () => {
-      // если уже активна — просто закрываем
       if (card.classList.contains('active')) {
         card.classList.remove('active');
       } else {
-        // иначе закрываем все остальные и открываем текущую
         cards.forEach(c => c.classList.remove('active'));
         card.classList.add('active');
       }
@@ -135,14 +156,12 @@ document.addEventListener('DOMContentLoaded', () => {
   let dotsContainer, dots;
 
   function initSlider() {
-    // если ширина > 900 — отключаем слайдер
     if (window.innerWidth > 900) {
       slider.style.transform = '';
       if (dotsContainer) dotsContainer.remove();
       return;
     }
 
-    // создаём точки только если их ещё нет
     if (!dotsContainer) {
       dotsContainer = document.createElement('div');
       dotsContainer.classList.add('slider_dots');
@@ -157,15 +176,15 @@ document.addEventListener('DOMContentLoaded', () => {
       dots = dotsContainer.querySelectorAll('.slider_dot');
     }
 
-    moveToSlide(0); // начальная позиция
+    moveToSlide(0);
   }
 
   function moveToSlide(index) {
-    if (window.innerWidth > 900) return; // не сдвигать если десктоп
+    if (window.innerWidth > 900) return;
     if (index < 0) index = slides.length - 1;
     if (index >= slides.length) index = 0;
     currentIndex = index;
-    const slideWidth = slides[0].offsetWidth + 28; // с учётом gap
+    const slideWidth = slides[0].offsetWidth + 28;
     slider.style.transform = `translateX(-${index * slideWidth}px)`;
     updateDots();
   }
@@ -175,12 +194,31 @@ document.addEventListener('DOMContentLoaded', () => {
     dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIndex));
   }
 
-  // пересоздаём слайдер при изменении ширины
-  window.addEventListener('resize', initSlider);
+  // === свайп ===
+  let touchStartX = 0;
+  let touchEndX = 0;
 
-  initSlider(); // запустить при загрузке
+  sliderContainer.addEventListener('touchstart', e => {
+    touchStartX = e.changedTouches[0].screenX;
+  });
+
+  sliderContainer.addEventListener('touchend', e => {
+    touchEndX = e.changedTouches[0].screenX;
+    handleSwipe();
+  });
+
+  function handleSwipe() {
+    const diff = touchEndX - touchStartX;
+    if (Math.abs(diff) < 50) return; // минимальная дистанция свайпа
+    if (diff > 0) moveToSlide(currentIndex - 1); // свайп вправо → предыдущий
+    else moveToSlide(currentIndex + 1);          // свайп влево → следующий
+  }
+
+  window.addEventListener('resize', initSlider);
+  initSlider();
 });
 
+
 // ----------------------------------------------------------ВЫПАДАЮЩЕЕ-МЕНЮ--------------------------------------------------------
 
 document.querySelector('.header_nav_link-reverse').addEventListener('click', function() {
@@ -282,9 +320,30 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   function updateDots() {
+    if (!dots) return;
     dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIndex));
   }
 
+  // === свайп ===
+  let touchStartX = 0;
+  let touchEndX = 0;
+
+  slider.addEventListener('touchstart', e => {
+    touchStartX = e.changedTouches[0].screenX;
+  });
+
+  slider.addEventListener('touchend', e => {
+    touchEndX = e.changedTouches[0].screenX;
+    handleSwipe();
+  });
+
+  function handleSwipe() {
+    const diff = touchEndX - touchStartX;
+    if (Math.abs(diff) < 50) return; // минимальная длина свайпа
+    if (diff > 0) moveToSlide(currentIndex - 1); // свайп вправо → предыдущий
+    else moveToSlide(currentIndex + 1);          // свайп влево → следующий
+  }
+
   window.addEventListener('resize', initServicesSlider);
   initServicesSlider();
-});
+});