final

template-parts/la-components/blocks/hero-block/hero-block.js

@@ -3,43 +3,115 @@ document.addEventListener('DOMContentLoaded', function() {
 
     heroBlocks.forEach(function(block) {
         const swiperContainer = block.querySelector('.swiper');
-
         if (!swiperContainer) return;
 
+        let progressAnimation = null;
+        const autoplayDelay = 4000;
+
         const swiper = new Swiper(swiperContainer, {
             slidesPerView: 1,
             grabCursor: true,
+            loop: true,
+            effect: 'fade',
+            fadeEffect: {
+                crossFade: true
+            },
+            autoplay: {
+                delay: autoplayDelay,
+                disableOnInteraction: false
+            },
             on: {
                 slideChange: function () {
                     updatePagination(block, this.realIndex);
+                    startProgressAnimation(block, this.realIndex);
+                },
+                autoplayStart: function() {
+                    startProgressAnimation(block, this.realIndex);
+                },
+                autoplayStop: function() {
+                    stopProgressAnimation();
                 }
             }
         });
 
-        // Функция обновления пагинации
         function updatePagination(block, activeIndex) {
             const paginationItems = block.querySelectorAll('.pagination-item');
 
             paginationItems.forEach((item, index) => {
-                item.setAttribute('data-active', index === activeIndex ? 'true' : 'false');
+                const isActive = index === activeIndex;
+                item.setAttribute('data-active', isActive ? 'true' : 'false');
+
+                const line = item.querySelector('.pagination-line');
+                if (line && !isActive) {
+                    line.style.background = '';
+                    line.style.backgroundImage = '';
+                }
             });
         }
 
-        // Навигация
+        function startProgressAnimation(block, activeIndex) {
+            stopProgressAnimation();
+
+            const paginationItems = block.querySelectorAll('.pagination-item');
+            const activeItem = paginationItems[activeIndex];
+
+            if (!activeItem) return;
+
+            const line = activeItem.querySelector('.pagination-line');
+            if (!line) return;
+
+            line.style.backgroundImage = 'linear-gradient(to right, rgba(255, 255, 255, 0.8) 0%, transparent 0%)';
+
+            let progress = 0;
+            const startTime = Date.now();
+
+            function animate() {
+                const elapsed = Date.now() - startTime;
+                progress = Math.min(elapsed / autoplayDelay, 1);
+
+                const percentage = progress * 100;
+                line.style.backgroundImage = `linear-gradient(to right, rgba(255, 255, 255, 0.8) ${percentage}%, transparent ${percentage}%)`;
+
+                if (progress < 1) {
+                    progressAnimation = requestAnimationFrame(animate);
+                }
+            }
+
+            progressAnimation = requestAnimationFrame(animate);
+        }
+
+        function stopProgressAnimation() {
+            if (progressAnimation) {
+                cancelAnimationFrame(progressAnimation);
+                progressAnimation = null;
+            }
+        }
+
         const prevBtn = block.querySelector('.custom-prev');
         const nextBtn = block.querySelector('.custom-next');
 
         if (prevBtn) {
-            prevBtn.addEventListener('click', () => swiper.slidePrev());
+            prevBtn.addEventListener('click', () => {
+                swiper.slidePrev();
+                stopProgressAnimation();
+            });
         }
 
         if (nextBtn) {
-            nextBtn.addEventListener('click', () => swiper.slideNext());
+            nextBtn.addEventListener('click', () => {
+                swiper.slideNext();
+                stopProgressAnimation();
+            });
         }
 
-        // Пагинация
         block.querySelectorAll('.pagination-item').forEach((item, index) => {
-            item.addEventListener('click', () => swiper.slideToLoop(index));
+            item.addEventListener('click', () => {
+                swiper.slideToLoop(index);
+                stopProgressAnimation();
+            });
         });
+
+        updatePagination(block, 0);
+        startProgressAnimation(block, 0);
     });
 });