diff --git a/main.js b/main.js index f90bc66..5496e82 100644 --- a/main.js +++ b/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() { diff --git a/style.css b/style.css index 54ca23b..d6cebb7 100644 --- a/style.css +++ b/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%; + } }