zz-shopify-components 0.32.1-beta.3 → 0.32.1-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.32.1-beta.3",
+  "version": "0.32.1-beta.4",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/sections/zz-navigation-tab-v3.liquid

@@ -248,7 +248,7 @@
           const id = tab.dataset.target;
           const target = document.querySelector(`[data-zz-module-name="${id}"]`);
           if (!target) return;
-          const headerHeight = isDesktop ? 50 : 50;
+          const headerHeight = isDesktop ? 50 : 100;
           const rect = target.getBoundingClientRect();
           const offsetTop = rect.top + window.scrollY - headerHeight;
           scrollPaginationToCenter();

package/sections/zz-swiper-gallery-center.liquid

@@ -41,6 +41,9 @@
       right: 6px;
       height: 1px;
     }
+    #shopify-section-{{ section.id }} .custom-pagination {
+      padding-right: calc(100% - 20px - 196px);
+    }
     #shopify-section-{{ section.id }} .progress-line {
       height: 1px;
       background-color: #FFFFFF;
@@ -143,7 +146,7 @@
       </div>
 
       <!-- Pagination indicator -->
-      <div class='custom-pagination zz-overflow-scrollbar-hidden tw-px-[20px] lg:tw-px-[80px] tw-z-10 tw-w-full tw-absolute tw-left-0 tw-bottom-[122px] lg:tw-bottom-[20px] tw-flex tw-flex-nowrap tw-overflow-x-auto tw-overflow-y-hidden tw-justify-start lg:tw-justify-center tw-gap-[15px]'>
+      <div class='custom-pagination zz-overflow-scrollbar-hidden tw-pl-[20px] lg:tw-px-[80px] tw-z-10 tw-w-full tw-absolute tw-left-0 tw-bottom-[122px] lg:tw-bottom-[20px] tw-flex tw-flex-nowrap tw-overflow-x-auto tw-overflow-y-hidden tw-justify-start lg:tw-justify-center max-lg:tw-gap-[20px] lg:tw-gap-[15px]'>
         {% for block in swiper_blocks %}
           <div class="pagination-item tw-cursor-pointer tw-text-white tw-relative tw-rounded-[10px] tw-w-[196px] tw-h-[95px] lg:tw-w-[389px] lg:tw-h-[213px]" 
             {% if section.settings.module_id != blank %} data-track-zz-element="{{ section.settings.module_id }}_change" {% endif %}
@@ -298,12 +301,10 @@
       const activeBullet = paginationContainer.querySelector('.pagination-item-active');
 
       if (activeBullet) {
-        const containerWidth = paginationContainer.offsetWidth;
         const bulletLeft = activeBullet.offsetLeft;
-        const bulletWidth = activeBullet.offsetWidth;
 
-        // 计算需要滚动的位置，使当前bullet居中
-        const scrollPosition = bulletLeft - (containerWidth / 2) + (bulletWidth / 2);
+        // 计算需要滚动的位置，使当前bullet左对齐，保留20px左边距
+        const scrollPosition = bulletLeft - 20;
 
         paginationContainer.scrollTo({
           left: scrollPosition,