Add 'template-parts/la-components/' from commit '54eb8e266ffe2f57afb812d18c8f78030562f62a'

git-subtree-dir: template-parts/la-components git-subtree-mainline: 7c5a7f373a git-subtree-split: 54eb8e266f
2025-06-01 12:42:07 +03:00
parent 7c5a7f373a 54eb8e266f
commit d2bec21994
21 changed files with 2178 additions and 0 deletions
--- a/template-parts/la-components/blocks/hero-block/hero-block.js
+++ b/template-parts/la-components/blocks/hero-block/hero-block.js
@@ -0,0 +1,45 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const heroBlocks = document.querySelectorAll('.hero-block');
+
+    heroBlocks.forEach(function(block) {
+        const swiperContainer = block.querySelector('.swiper');
+
+        if (!swiperContainer) return;
+
+        const swiper = new Swiper(swiperContainer, {
+            slidesPerView: 1,
+            loop: true,
+            grabCursor: true,
+            on: {
+                slideChange: function () {
+                    const realIndex = this.realIndex;
+                    const paginationItems = block.querySelectorAll('.pagination-item');
+
+                    paginationItems.forEach((item, index) => {
+                        const line = item.querySelector('.pagination-line');
+                        const text = item.querySelector('.slide-text');
+
+                        if (index === realIndex) {
+                            item.className = 'pagination-item flex-[2] cursor-pointer transition-all ';
+                            line.className = 'pagination-line bg-[#222] h-[2px] rounded-[30px] transition-colors ';
+                            text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-100 transition-opacity ';
+                        } else {
+                            item.className = 'pagination-item flex-1 cursor-pointer transition-all ';
+                            line.className = 'pagination-line bg-[#e0e0e0] h-[2px] rounded-[30px] transition-colors ';
+                            text.className = 'slide-text mt-[10px] text-[14px] text-[#222] font-[600] opacity-0 transition-opacity ';
+                        }
+                    });
+                }
+            }
+        });
+
+        // Навигация
+        block.querySelector('.custom-prev')?.addEventListener('click', () => swiper.slidePrev());
+        block.querySelector('.custom-next')?.addEventListener('click', () => swiper.slideNext());
+
+        // Пагинация
+        block.querySelectorAll('.pagination-item').forEach((item, index) => {
+            item.addEventListener('click', () => swiper.slideToLoop(index));
+        });
+    });
+});