блоки в админку и фиксы стилей

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

@@ -12,16 +12,43 @@ function initReviewsBlock(blockId) {
     const swipers = {};
     let lightbox;
 
-    function initSwiper(tabId) {
-        if (swipers[tabId]) {
-            swipers[tabId].destroy(true, true);
-        }
+    function initAllSwipers() {
+        const tabs = container.querySelectorAll('.tab-button');
 
-        swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
-            slidesPerView: 3,
-            spaceBetween: 20,
-            loop: true,
-            centeredSlides: true,
+        tabs.forEach(button => {
+            const tabId = button.getAttribute('data-tab');
+            const tabContent = container.querySelector(`#tab-${tabId}`);
+
+            if (tabContent && tabContent.querySelector('.swiper')) {
+                const wasHidden = tabContent.classList.contains('hidden');
+                if (wasHidden) {
+                    tabContent.style.visibility = 'hidden';
+                    tabContent.style.position = 'absolute';
+                    tabContent.classList.remove('hidden');
+                    tabContent.classList.add('block');
+                }
+
+                if (swipers[tabId]) {
+                    swipers[tabId].destroy(true, true);
+                }
+
+                swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
+                    slidesPerView: 'auto',
+                    spaceBetween: 20,
+                    loop: true,
+                    centeredSlides: true,
+                    observer: true,
+                    observeParents: true,
+                    watchSlidesProgress: true,
+                });
+
+                if (wasHidden) {
+                    tabContent.style.visibility = '';
+                    tabContent.style.position = '';
+                    tabContent.classList.add('hidden');
+                    tabContent.classList.remove('block');
+                }
+            }
         });
     }
 
@@ -64,8 +91,14 @@ function initReviewsBlock(blockId) {
         });
     }
 
+    initAllSwipers();
+
+    const activeTab = container.querySelector('.tab-button.active');
+    if (activeTab) {
+        const tabId = activeTab.getAttribute('data-tab');
+        initLightbox(tabId);
+    }
 
-    // Табы
     container.querySelectorAll('.tab-button').forEach(button => {
         button.addEventListener('click', () => {
             const tabId = button.getAttribute('data-tab');
@@ -81,24 +114,18 @@ function initReviewsBlock(blockId) {
                 content.classList.remove('block');
                 content.classList.add('hidden');
             });
-            container.querySelector(`#tab-${tabId}`).classList.remove('hidden');
-            container.querySelector(`#tab-${tabId}`).classList.add('block');
 
-            setTimeout(() => {
-                initSwiper(tabId);
-                initLightbox(tabId);
-            }, 100);
+            const targetTab = container.querySelector(`#tab-${tabId}`);
+            targetTab.classList.remove('hidden');
+            targetTab.classList.add('block');
+
+            if (swipers[tabId]) {
+                requestAnimationFrame(() => {
+                    swipers[tabId].update();
+                });
+            }
+
+            initLightbox(tabId);
         });
     });
-
-
-
-    const firstTab = container.querySelector('.tab-button.active');
-    if (firstTab) {
-        const tabId = firstTab.getAttribute('data-tab');
-        setTimeout(() => {
-            initSwiper(tabId);
-            initLightbox(tabId);
-        }, 100);
-    }
 }