figma_adp_mob_final

main.js

@@ -134,91 +134,92 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // -----------------------------------------ACCORDION-SECOND----------------------------------------------
 document.addEventListener('DOMContentLoaded', () => {
+  // карточки (открытие/закрытие)
   const cards = document.querySelectorAll('.advantage_slider_item');
-
   cards.forEach(card => {
     card.addEventListener('click', () => {
-      if (card.classList.contains('active')) {
-        card.classList.remove('active');
-      } else {
+      if (card.classList.contains('active')) card.classList.remove('active');
+      else {
         cards.forEach(c => c.classList.remove('active'));
         card.classList.add('active');
       }
     });
   });
-});
 
-document.addEventListener('DOMContentLoaded', () => {
+  // слайдер
   const sliderContainer = document.querySelector('.advantage_slider');
   const slider = document.querySelector('.advantage_slider_items');
   const slides = document.querySelectorAll('.advantage_slider_item');
   let currentIndex = 0;
-  let dotsContainer, dots;
+  let dotsContainer = null;
+  let dots = null;
 
-  function initSlider() {
-    if (window.innerWidth > 900) {
-      slider.style.transform = '';
-      if (dotsContainer) dotsContainer.remove();
-      return;
-    }
+  const isMobile = () => window.matchMedia('(max-width: 900px)').matches;
 
-    if (!dotsContainer) {
-      dotsContainer = document.createElement('div');
-      dotsContainer.classList.add('slider_dots');
-      slides.forEach((_, i) => {
-        const dot = document.createElement('div');
-        dot.classList.add('slider_dot');
-        if (i === 0) dot.classList.add('active');
-        dot.addEventListener('click', () => moveToSlide(i));
-        dotsContainer.appendChild(dot);
-      });
-      sliderContainer.appendChild(dotsContainer);
-      dots = dotsContainer.querySelectorAll('.slider_dot');
-    }
-
-    moveToSlide(0);
-  }
-
-  function moveToSlide(index) {
-    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;
-    slider.style.transform = `translateX(-${index * slideWidth}px)`;
-    updateDots();
+  function buildDots() {
+    if (dotsContainer) dotsContainer.remove();
+    dotsContainer = document.createElement('div');
+    dotsContainer.className = 'slider_dots';
+    slides.forEach((_, i) => {
+      const dot = document.createElement('div');
+      dot.className = 'slider_dot' + (i === currentIndex ? ' active' : '');
+      dot.addEventListener('click', () => moveToSlide(i));
+      dotsContainer.appendChild(dot);
+    });
+    sliderContainer.appendChild(dotsContainer);
+    dots = dotsContainer.querySelectorAll('.slider_dot');
   }
 
   function updateDots() {
     if (!dots) return;
-    dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIndex));
+    dots.forEach((d, i) => d.classList.toggle('active', i === currentIndex));
   }
 
-  // === свайп ===
-  let touchStartX = 0;
-  let touchEndX = 0;
+  function moveToSlide(index) {
+    if (!isMobile()) return;
+    if (index < 0) index = slides.length - 1;
+    if (index >= slides.length) index = 0;
+    currentIndex = index;
 
+    // <<< ВАЖНО: едем к фактическому смещению карточки >>>
+    const offset = slides[index].offsetLeft;
+    slider.style.transform = `translateX(-${offset}px)`;
+
+    updateDots();
+  }
+
+  function initSlider() {
+    if (!slider || slides.length === 0) return;
+
+    if (!isMobile()) {
+      // десктоп: сброс
+      slider.style.transform = '';
+      if (dotsContainer) { dotsContainer.remove(); dotsContainer = null; dots = null; }
+      return;
+    }
+
+    if (!dotsContainer) buildDots();
+
+    // после ресайза дождаться перерасчёта верстки
+    requestAnimationFrame(() => moveToSlide(currentIndex));
+  }
+
+  // свайпы
+  let touchStartX = 0;
   sliderContainer.addEventListener('touchstart', e => {
     touchStartX = e.changedTouches[0].screenX;
-  });
-
+  }, {passive:true});
   sliderContainer.addEventListener('touchend', e => {
-    touchEndX = e.changedTouches[0].screenX;
-    handleSwipe();
+    const diff = e.changedTouches[0].screenX - touchStartX;
+    if (Math.abs(diff) >= 50) {
+      moveToSlide(currentIndex + (diff < 0 ? 1 : -1));
+    }
   });
 
-  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() {

style.css

@@ -727,10 +727,12 @@ html, body, * {
 }
 .advantage_slider_items { 
   margin: 0;
-  display:flex; 
-  gap:28px; 
+  display:flex;  
   width: 100%;
 }
+.advantage_slider_item:not(:last-child) {
+  margin-right: 28px;
+}
 
 .advantage_slider_item {
   position:relative; 
@@ -2177,6 +2179,19 @@ body.lock {
 .row_middle_title {
     font-size: 24px;
   }
+ .advantage_slider {
+    justify-content: flex-start;
+    overflow: hidden;
+  }
+  .advantage_slider_items {
+    justify-content: flex-start;
+    transition: transform .4s ease;
+    will-change: transform;
+  }
+  .advantage_slider_item {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
 
 }