№1 PPF В МИРЕ

/* GSWF Products Series Slider Styles */ .gswf-slider-section { /* Dynamically calculate left and right margins for a 1600px container, minimum 20px gap */ --container-margin: max(20px, calc((100% - 1600px) / 2)); width: 100%; /* Full width with controlled internal padding */ padding: 60px 0; box-sizing: border-box; position: relative; overflow: hidden; /* Prevent horizontal scrollbars in some themes */ background-color: #09090B; /* Dark background */ } /* H2 Title Style: Inherits from Elementor, controls spacing only */ .gswf-slider-title { margin-top: 0; margin-bottom: 50px; /* Distance to cards below */ padding-left: var(--container-margin); padding-right: var(--container-margin); } /* Slider main container */ .gswf-slider-container { position: relative; width: 100%; } /* Track settings */ .gswf-slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; /* Scroll snap effect */ scroll-behavior: smooth; scroll-padding-left: var(--container-margin); /* Reserve margin during snap */ scroll-padding-right: var(--container-margin); /* Hide default scrollbar */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ } .gswf-slider-track::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ } /* Perfect bleed effect using pseudo-elements */ .gswf-slider-track::before, .gswf-slider-track::after { content: ''; flex: 0 0 var(--container-margin); } /* Single card settings */ .gswf-slide-card { flex: 0 0 527px; /* Fixed width 527px on desktop */ height: 527px; /* Fixed height 527px on desktop */ border-radius: 10px; /* 10px rounded corners */ overflow: hidden; scroll-snap-align: start; display: block; text-decoration: none; user-select: none; -webkit-user-drag: none; /* Prevent selection when dragging */ position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-right: 30px; /* Use margin instead of gap for pseudo-element calculations */ } .gswf-slide-card:last-of-type { margin-right: 0; /* Remove right margin for the last card */ } .gswf-slide-card img { width: 100%; height: 100%; object-fit: cover; /* Ensure image covers the area without distortion */ pointer-events: none; /* Prevent image ghosting when dragging */ transition: transform 0.3s ease; } /* Slight zoom effect on hover */ .gswf-slide-card:hover img { transform: scale(1.03); } /* Left and right arrow buttons */ .gswf-arrow-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; /* Icon width */ height: 48px; /* Icon height */ background-color: transparent; /* Transparent background */ border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 100; /* Prevent overlap issues */ padding: 0; transition: opacity 0.3s ease, transform 0.2s ease; } .gswf-arrow-btn:hover { transform: translateY(-50%) scale(1.05); /* Slight scale on hover */ } .gswf-arrow-btn img { width: 100%; height: 100%; object-fit: contain; /* Ensure icon displays fully */ } /* Button positioning */ .gswf-prev { left: calc(var(--container-margin) + 10px); } .gswf-next { right: calc(var(--container-margin) + 10px); } /* Bottom progress bar */ .gswf-progress-wrapper { width: 242px; height: 4px; background-color: #585757; /* Default track color */ margin: 50px auto 0; /* Centered, 50px from the sliding area above */ border-radius: 2px; position: relative; overflow: hidden; } .gswf-progress-fill { position: absolute; top: 0; left: 0; height: 100%; background-color: #FFFFFF; /* Active progress color */ border-radius: 2px; /* Transition for smooth progress */ transition: left 0.1s ease-out, width 0.3s ease-out; } /* ========================================= Responsive Design (Tablet & Mobile) ========================================= */ /* Tablet (1024px and below) */ @media (max-width: 1024px) { .gswf-slide-card { flex: 0 0 350px; height: 350px; margin-right: 20px; } } /* Mobile (768px and below) */ @media (max-width: 768px) { .gswf-slider-section { padding: 40px 0; /* Reduce padding on mobile */ } .gswf-slider-title { margin-bottom: 30px; } .gswf-slide-card { /* Mobile cards take 80% width, proportional height, max 400px */ flex: 0 0 80vw; height: 80vw; max-height: 400px; margin-right: 15px; } /* Hide arrows on mobile to save space, rely on touch swipe */ .gswf-arrow-btn { display: none; } } (function() { function initGSWFSliders() { // Get all slider sections to prevent conflicts if multiple are added const sections = document.querySelectorAll('.gswf-slider-section:not(.js-initialized)'); sections.forEach(section => { section.classList.add('js-initialized'); const track = section.querySelector('.gswf-slider-track'); const prevBtn = section.querySelector('.gswf-prev'); const nextBtn = section.querySelector('.gswf-next'); const progressFill = section.querySelector('.gswf-progress-fill'); const cards = section.querySelectorAll('.gswf-slide-card'); // 1. Update UI State (Arrows visibility & Progress bar) const updateUI = () => { const maxScroll = track.scrollWidth - track.clientWidth; const currentScroll = track.scrollLeft; // Handle prev button visibility if (currentScroll = maxScroll - 1) { nextBtn.style.opacity = '0'; nextBtn.style.pointerEvents = 'none'; } else { nextBtn.style.opacity = '1'; nextBtn.style.pointerEvents = 'auto'; } // Handle progress bar logic let ratio = track.clientWidth / track.scrollWidth; if (ratio > 1) ratio = 1; const thumbWidthPercent = Math.max(15, ratio * 100); // Minimum 15% width progressFill.style.width = `${thumbWidthPercent}%`; if (maxScroll > 0) { const scrollPercent = currentScroll / maxScroll; const leftPos = scrollPercent * (100 - thumbWidthPercent); progressFill.style.left = `${leftPos}%`; } else { progressFill.style.left = `0%`; } }; // Listen to scroll and resize events track.addEventListener('scroll', updateUI); window.addEventListener('resize', updateUI); // 2. Arrow Click Events prevBtn.addEventListener('click', () => { const cardStyle = window.getComputedStyle(cards[0]); const cardWidth = cards[0].offsetWidth + parseInt(cardStyle.marginRight); // Smooth scroll to start if very close if (track.scrollLeft - cardWidth * 1.5 { const cardStyle = window.getComputedStyle(cards[0]); const cardWidth = cards[0].offsetWidth + parseInt(cardStyle.marginRight); const maxScroll = track.scrollWidth - track.clientWidth; // Smooth scroll to end if very close if (track.scrollLeft + cardWidth * 1.5 >= maxScroll) { track.scrollTo({ left: maxScroll, behavior: 'smooth' }); } else { track.scrollBy({ left: cardWidth, behavior: 'smooth' }); } }); // 3. Mouse Drag Scrolling Logic (for Desktop) let isDown = false; let isDragging = false; let startX; let scrollLeft; track.addEventListener('mousedown', (e) => { isDown = true; isDragging = false; track.style.cursor = 'grabbing'; track.style.scrollSnapType = 'none'; // Better feel without snapping during drag startX = e.pageX - track.offsetLeft; scrollLeft = track.scrollLeft; }); track.addEventListener('mouseleave', () => { isDown = false; track.style.cursor = 'auto'; track.style.scrollSnapType = 'x mandatory'; }); track.addEventListener('mouseup', () => { isDown = false; track.style.cursor = 'auto'; track.style.scrollSnapType = 'x mandatory'; }); track.addEventListener('mousemove', (e) => { if (!isDown) return; e.preventDefault(); isDragging = true; const x = e.pageX - track.offsetLeft; const walk = (x - startX) * 1.5; // Drag speed multiplier track.scrollLeft = scrollLeft - walk; }); // Prevent link navigation if a drag occurred cards.forEach(card => { card.addEventListener('click', (e) => { if (isDragging) { e.preventDefault(); } }); }); // Initial UI update setTimeout(updateUI, 100); }); } // Initialize on load if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initGSWFSliders); } else { initGSWFSliders(); } })();