figma_adp_mob_02

2025-10-30 03:29:06 +03:00
parent 018ee2089e
commit 418e0a8653
3 changed files with 413 additions and 30 deletions
--- a/main.js
+++ b/main.js
@@ -14,33 +14,100 @@

 // -------------------------------ACCORDION-SLIDER-----------------------------------------------------------

-const items = document.querySelectorAll('.accordion-item');
+document.addEventListener('DOMContentLoaded', () => {
+  const accordion = document.querySelector('.accordion');
+  const items = document.querySelectorAll('.accordion-item');
+  const dotsContainer = document.createElement('div');
+  dotsContainer.classList.add('slider-dots');
+  accordion.after(dotsContainer);

-// Делаем первый аккордеон активным по умолчанию
-if(items.length > 0) {
-  items[0].classList.add('active');
-}
+  let dots = [];
+  let isMobile = false; // флаг режима

-// items.forEach(item => {
-//   item.addEventListener('click', () => {
-//     items.forEach(i => i.classList.remove('active'));
-//     item.classList.add('active');
-//   });
-// });
-// код ниже если нужно картинку на открытую и закрытую колонку(ток классы добавь в html и картинки по 2 или че там придумаешь)
-items.forEach(item => {
-    item.addEventListener('click', () => {
-      items.forEach(i => {
-        i.classList.remove('active');
-        i.querySelector('.img-open').style.display = 'none';
-        i.querySelector('.img-closed').style.display = 'block';
-      });
-  
-      item.classList.add('active');
-      item.querySelector('.img-open').style.display = 'block';
-      item.querySelector('.img-closed').style.display = 'none';
+  // === СОЗДАНИЕ ТОЧЕК ===
+  function createDots() {
+    dotsContainer.innerHTML = '';
+    items.forEach((_, index) => {
+      const dot = document.createElement('span');
+      dot.classList.add('dot');
+      if (index === 0) dot.classList.add('active');
+      dotsContainer.appendChild(dot);
    });
-  });
+    dots = document.querySelectorAll('.dot');
+  }
+
+  // === ПОКАЗ СЛАЙДА ===
+  function showSlide(index) {
+    items.forEach((item, i) => {
+      if (i === index) {
+        item.style.display = 'flex';
+      } else {
+        item.style.display = 'none';
+      }
+    });
+
+    dots.forEach(dot => dot.classList.remove('active'));
+    dots[index].classList.add('active');
+  }
+
+  // === АКТИВАЦИЯ СЛАЙДЕРА НА МОБИЛЬНОМ ===
+  function enableSlider() {
+    isMobile = true;
+    items.forEach(item => item.classList.add('active')); // все раскрыты
+    createDots();
+    let currentIndex = 0;
+    showSlide(currentIndex);
+
+    dots.forEach((dot, i) => {
+      dot.addEventListener('click', () => {
+        currentIndex = i;
+        showSlide(currentIndex);
+      });
+    });
+
+    dotsContainer.style.display = 'flex';
+  }
+
+  // === ОТКЛЮЧЕНИЕ СЛАЙДЕРА НА ДЕСКТОПЕ ===
+  function disableSlider() {
+    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) {
+          items.forEach(i => i.classList.remove('active'));
+          item.classList.add('active');
+        }
+      };
+    });
+  }
+
+  // === ПРОВЕРКА ШИРИНЫ ===
+  function checkWidth() {
+    if (window.innerWidth <= 600 && !isMobile) {
+      enableSlider();
+    } else if (window.innerWidth > 600 && isMobile) {
+      disableSlider();
+    } else if (window.innerWidth > 600 && !isMobile) {
+      disableSlider();
+    }
+  }
+
+  // Инициализация
+  checkWidth();
+  window.addEventListener('resize', checkWidth);
+});

  // -----------------------------------------ACCORDION-SECOND----------------------------------------------
 document.addEventListener('DOMContentLoaded', () => {