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

blocks/gallery-tabs/gallery-tabs.js

@@ -12,23 +12,51 @@ function initGalleryBlock(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: 1.5,
-            spaceBetween: 20,
-            loop: true,
-            centeredSlides: true,
-            navigation: {
-                nextEl: `#${blockId} #swiper-${tabId} .swiper-button-next`,
-                prevEl: `#${blockId} #swiper-${tabId} .swiper-button-prev`,
-            },
-            on: {
-                slideChange: function() {
-                    updateThumbnails(tabId, this.realIndex);
+        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: 1.5,
+                    spaceBetween: 20,
+                    loop: true,
+                    centeredSlides: true,
+                    grabCursor: true,
+                    observer: true,
+                    observeParents: true,
+                    watchSlidesProgress: true,
+                    navigation: {
+                        nextEl: `#${blockId} #swiper-${tabId} .swiper-button-next`,
+                        prevEl: `#${blockId} #swiper-${tabId} .swiper-button-prev`,
+                    },
+                    on: {
+                        slideChange: function() {
+                            updateThumbnails(tabId, this.realIndex);
+                        }
+                    }
+                });
+
+                if (wasHidden) {
+                    tabContent.style.visibility = '';
+                    tabContent.style.position = '';
+                    tabContent.classList.add('hidden');
+                    tabContent.classList.remove('block');
                 }
             }
         });
@@ -57,7 +85,14 @@ function initGalleryBlock(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');
@@ -73,17 +108,21 @@ function initGalleryBlock(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);
         });
     });
 
-    // Thumbnails
     container.addEventListener('click', (e) => {
         if (e.target.closest('.thumbnail')) {
             const thumbnail = e.target.closest('.thumbnail');
@@ -98,13 +137,4 @@ function initGalleryBlock(blockId) {
             updateThumbnails(tabId, index);
         }
     });
-
-    const firstTab = container.querySelector('.tab-button.active');
-    if (firstTab) {
-        const tabId = firstTab.getAttribute('data-tab');
-        setTimeout(() => {
-            initSwiper(tabId);
-            initLightbox(tabId);
-        }, 100);
-    }
 }