zz-shopify-components 0.0.21 → 0.0.22

package/sections/zz-video-tab-swiper.liquid

@@ -1,748 +1,748 @@
-{% assign non_collapsible_blocks = section.blocks
-  | reject: 'type', 'video'
-%}
-{% assign swiper_blocks = section.blocks | where: 'type', 'video' %}
-{% assign block_size = swiper_blocks.size %}
-
-<style>
-  #shopify-section-{{ section.id }} {
-    background: {{ section.settings.bg_color }};
-    padding-top: {{ section.settings.mobile_padding_top }}px;
-    padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
-  }
-  #shopify-section-{{ section.id }} .swiper-slide{
-    background: {{ section.settings.bg_color }};
-  }
-  @media screen and (min-width: 1024px) {
-    #shopify-section-{{ section.id }}  {
-      padding-top: {{ section.settings.pc_padding_top }}px;
-      padding-bottom: {{ section.settings.pc_padding_bottom }}px;
-    }
-  }
-   #shopify-section-{{ section.id }} .zz-video-tab-swiper {
-     width: 100%;
-     letter-spacing: 0;
-   }
-
-   #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
-     bottom: 9px;
-   }
-   #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
-     padding: 0 8px;
-     background-color: {{ section.settings.pagination_color }};
-     opacity: 0.5;
-   }
-   #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
-     opacity: 1;
-   }
-
-   #shopify-section-{{ section.id }} .swiper-slide-active .active-box-content {
-    display: block !important;
-   }
-   @media screen and (max-width: 1024px) {
-     #shopify-section-{{ section.id }} .zz-video-tab-swiper {
-       width: 100%;
-       padding: 0 20px;
-     }
-
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper {
-       width: 100%;
-
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
-       width: 100% !important;
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
-       position: relative;
-       width: 100%;
-       aspect-ratio: 16 / 9;
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
-       bottom: 85px;
-       left: 50%;
-       transform: translateX(-50%);
-       width: 90vw;
-       height: 48px;
-     }
-     #shopify-section-{{ section.id }}  .swiper-pagination-horizontal {
-       overflow-x: auto;       /* 启用横向滚动 */
-       white-space: nowrap;    /* 不换行，强制所有子项在一行 */
-       -webkit-overflow-scrolling: touch; /* 移动端流畅滚动（可选） */
-       scrollbar-width: none;     /* Firefox */
-       -ms-overflow-style: none;  /* IE 和 Edge */
-     }
-     #shopify-section-{{ section.id }}  .swiper-pagination-horizontal::-webkit-scrollbar {
-       display: none;             /* Chrome, Safari */
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
-      border-bottom: 1px solid {{ section.settings.mb_tab_line_color }};
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
-       box-sizing: content-box;
-       margin: 0;
-       margin-right: 20px;
-       width: fit-content;
-       height: 47px;
-       line-height: 47px;
-       border-radius: 0;
-       background: none;
-       border-top: 0;
-       color: {{ section.settings.tab_title_color }};
-       opacity: 1;
-       font-weight: 700;
-       margin-bottom: -1px;
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet:last-child {
-      margin: 0;
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
-       border-bottom: 2px solid {{ section.settings.mb_tab_active_line_color }};
-       height: 45px;
-       line-height: 45px;
-       
-       color: {{ section.settings.tab_title_active_color }};
-     }
-
-   }
-   @media screen and (min-width: 1024px) {
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper {
-       width: 80vw;
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
-       width: 80vw;
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
-       position: relative;
-       width: 80vw;
-       height: calc(80vw / 16 * 9);
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
-       bottom: 135px;
-       left: 50%;
-       transform: translateX(-50%);
-       width: 70vw;
-       height: 48px;
-       display: flex;
-       border-radius: 4px;
-       background: {{ section.settings.tab_bar_bg_color }};
-
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
-       box-sizing: content-box;
-       margin: 0;
-       width: calc(100% / {{ block_size }});
-       height: 47px;
-       line-height: 47px;
-       border-radius: 0;
-       background: none;
-       border-top: 0;
-       color: {{ section.settings.tab_title_color }};
-       opacity: 1;
-       font-weight: 700;
-       font-size: 18px;
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
-       border-top: 2px solid {{ section.settings.pc_tab_active_line_color }};
-       height: 45px;
-       line-height: 45px;
-       color: {{ section.settings.tab_title_active_color }};
-       font-weight: 700;
-     }
-
-   }
-   @media screen and (min-width: 1280px) {
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper {
-      width: 1220px;
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
-      width: 1220px;
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
-       position: relative;
-       width: 1220px;
-        height: 686px;
-     }
-     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
-       width: 1030px;
-     }
-   }
-
-</style>
-
-<div 
-  class='zz-video-tab-swiper'
-  {% if section.settings.module_name != blank %}data-zz-module-name="{{ section.settings.module_name }}"{% endif %}
->
-  <div class='fade-in-box tw-flex tw-flex-col tw-justify-center'>
-    {% for block in non_collapsible_blocks %}
-      {% case block.type %}
-        {% when 'title' %}
-          {% render 'zz-h2',
-            title: block.settings.pc_title,
-            title_mb: block.settings.mb_title,
-            title_color: block.settings.text_color,
-            class_name: 'content-title tw-text-center'
-          %}
-          <style>
-            #shopify-section-{{section.id}} .content-title {
-              margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
-            }
-            @media screen and (min-width: 1024px) {
-              #shopify-section-{{section.id}} .content-title {
-                margin-bottom: {{ block.settings.pc_margin_bottom }}px;
-              }
-            }
-          </style>
-        {% when 'text_content' %}
-          {% render 'zz-content-text',
-            text: block.settings.pc_text,
-            mb_text: block.settings.mb_text,
-            text_color: block.settings.text_color,
-            class_name: 'content-text tw-text-center'
-          %}
-          <style>
-            #shopify-section-{{section.id}} .content-text {
-              margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
-            }
-            @media screen and (min-width: 1024px) {
-              #shopify-section-{{section.id}} .content-text {
-                margin-bottom: {{ block.settings.pc_margin_bottom }}px;
-              }
-            }
-          </style>
-      {% endcase %}
-    {% endfor %}
-  </div>
-
-  <div class='zz-swiper-container'>
-    <div
-      class='swiper zz-banner-tab-swiper zz-banner-tab-swiper-{{ section.id }} lg:tw-w-[80vw] xl:tw-w-[64vw]'
-    >
-      <div class='swiper-wrapper'>
-        {% for banner in swiper_blocks %}
-          <div class='swiper-slide'>
-            <div class='media-box tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden'>
-              {% if banner.settings.video_pc != blank or banner.settings.video_url_pc != blank %}
-                {% if banner.settings.video_url_pc != blank %}
-                  {% assign pc_video = banner.settings.video_url_pc %}
-                {% else %}
-                  {% assign pc_video = banner.settings.video_pc %}
-                {% endif %}
-                {% render 'zz-video',
-                  pc_video: pc_video,
-                  pc_poster: banner.settings.poster_pc,
-                  mb_video: banner.settings.video_mb,
-                  mb_poster: banner.settings.poster_mb,
-                  lazy: true,
-                  class: 'tw-w-full tw-h-full tw-object-cover',
-                  autoplay: true,
-                  loop: false,
-                  muted: true
-                %}
-              {% else %}
-                {%- if banner.settings.poster_pc != blank -%}
-                  {%
-                    render 'zz-img',
-                    pc_image: banner.settings.poster_pc,
-                    mb_image: banner.settings.poster_mb | default: banner.settings.poster_pc,
-                    image_alt: banner.settings.slide_title | escape,
-                  %}
-                {% endif %}
-              {% endif %}
-            </div>
-            <div class='slide-box tw-mt-[78px] lg:tw-mt-[148px] tw-h-[60px] lg:tw-h-[80px]'>
-              <div class='active-box-content tw-hidden slide-content lg:tw-w-[814px] lg:tw-mx-auto tw-mt-[8px]'>
-                {% render 'zz-content-text',
-                  text: banner.settings.slide_content,
-                  mb_text: banner.settings.slide_content_mb,
-                  text_color: banner.settings.content_color,
-                  pc_font_size: 16,
-                  mobile_font_size: 12,
-                  pc_text_align: 'center',
-                  mobile_text_align: 'center'
-                %}
-              </div>
-            </div>
-          </div>
-        {% endfor %}
-      </div>
-
-      <!-- Pagination indicator -->
-      <div class='swiper-pagination'></div>
-    </div>
-  </div>
-</div>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function () {
-    let isDesktop = window.innerWidth > 1023;
-  // 添加标题数组
-  const slideTitles = [
-    {% for block in swiper_blocks %}
-      "{{ block.settings.slide_title }}",
-    {% endfor %}
-  ];
-
-  const swiperClassName = '.zz-banner-tab-swiper-{{ section.id }}';
-    const tabSwiper = new Swiper(swiperClassName, {
-      loop: true,
-      slidesPerView: 'auto',
-      centeredSlides: true,
-      spaceBetween: isDesktop ? 24 : 8,
-
-      pagination: {
-        el: '.swiper-pagination',
-        clickable: true,
-        renderBullet: function (index, className) {
-          const title = slideTitles[index % slideTitles.length];
-          return '<span class="' + className + '">' + title + '</span>';
-        }
-      },
-      effect: 'fade',
-      on: {
-
-        slideChangeTransitionEnd: function () {
-          handleVideoOnSlideChange()
-        },
-        slideChange: function (e) {
-          if (!isDesktop) {
-            scrollPaginationToCenter();
-          }
-        },
-        slideChangeTransitionStart: function () {
-          const section = document.getElementById(
-            'shopify-section-{{section.id}}'
-          );
-          const allvideo = section.querySelectorAll('video');
-          // 播放当前 active slide 中的视频
-          const activeSlide = section.querySelector('.swiper-slide-active');
-          const media = getVisibleDisplayMedias(activeSlide);
-          if (media.type === 'video') {
-            media.video.removeEventListener('ended', endedHandler);
-          }
-        }
-      },
-    });
-
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          // 当 swiper-wrapper 第一次出现在视口中时执行
-          setTimeout(() => {
-            handleVideoOnSlideChange();
-          }, 200);
-          // 执行一次后取消观察
-          observer.unobserve(entry.target);
-        }
-      });
-    }, {
-      threshold: 0.2 // 当 20% 的元素可见时触发
-    });
-    const section = document.getElementById(
-      'shopify-section-{{section.id}}'
-    );
-    const swiperWrapper = section.querySelector('.swiper-wrapper');
-    if (swiperWrapper) {
-      observer.observe(swiperWrapper);
-    }
-
-
-    function getVisibleDisplayMedias(container) {
-      const videos = container.querySelectorAll('video');
-      const video = Array.from(videos).find((video) => {
-        const style = window.getComputedStyle(video);
-        return style.display !== 'none';
-      });
-      if (video) {
-        return {
-          video,
-          type: 'video'
-        }
-      } else {
-        const images = container.querySelectorAll('img');
-        const image = Array.from(images).find((image) => {
-          const style = window.getComputedStyle(image);
-          return style.display !== 'none';
-        });
-        if (image) {
-          return {
-            image,
-            type: 'image'
-          }
-        }
-      }
-      return null;
-    }
-
-    function scrollPaginationToCenter() {
-      // 获取当前section
-      const section = document.getElementById(
-        'shopify-section-{{section.id}}'
-      );
-      const paginationContainer = section.querySelector('.swiper-pagination');
-      const activeBullet = paginationContainer.querySelector('.swiper-pagination-bullet-active');
-
-      if (activeBullet) {
-        const containerWidth = paginationContainer.offsetWidth;
-        const bulletLeft = activeBullet.offsetLeft;
-        const bulletWidth = activeBullet.offsetWidth;
-
-        // 计算需要滚动的位置，使当前bullet居中
-        const scrollPosition = bulletLeft - (containerWidth / 2) + (bulletWidth / 2);
-
-        paginationContainer.scrollTo({
-          left: scrollPosition,
-          behavior: 'smooth'
-        });
-      }
-    }
-    function endedHandler () {
-        if (tabSwiper.isEnd) {
-          tabSwiper.slideTo(0);
-        } else {
-          tabSwiper.slideNext();
-        }
-        this.removeEventListener('ended', endedHandler);
-    };
-    function handleMediaNext(type, videoDom) {
-      if (type === 'video') {
-        videoDom.addEventListener('ended', endedHandler);
-      } else if (type === 'image') {
-
-        setTimeout(() => {
-          if (tabSwiper.isEnd) {
-            tabSwiper.slideTo(0);
-          } else {
-            tabSwiper.slideNext();
-          }
-        }, 5000);
-      }
-    }
-
-    function handleVideoOnSlideChange() {
-      // 暂停所有视频
-
-      const section = document.getElementById(
-        'shopify-section-{{section.id}}'
-      );
-      const allvideo = section.querySelectorAll('video');
-      // 播放当前 active slide 中的视频
-      const activeSlide = section.querySelector('.swiper-slide-active');
-      const media = getVisibleDisplayMedias(activeSlide);
-      if (media.type === 'video') {
-        allvideo.forEach((item) => {
-          if (item === media.video) {
-            media.video.currentTime = 0;
-            media.video.play();
-            handleMediaNext('video', media.video);
-
-          } else {
-            item.currentTime = 0;
-            item.pause();
-          }
-        });
-      } else if (media.type === 'image') {
-        // 处理图片的情况
-        handleMediaNext('image', media.image);
-        allvideo.forEach((item) => {
-          item.pause();
-          item.currentTime = 0;
-        });
-      }
-
-    }
-
-  })
-</script>
-
-{% schema %}
-{
-  "name": "Video Img Swiper Tab",
-  "settings": [
-    {
-      "type": "color",
-      "id": "bg_color",
-      "default": "#ffffff",
-      "label": "背景色"
-    },
-
-    {
-      "type": "color",
-      "id": "pagination_color",
-      "default": "#ffffff",
-      "label": "轮播导航圆圈颜色"
-    },
-    {
-      "type": "color",
-      "id": "tab_bar_bg_color",
-      "label": "PC Tab栏背景颜色",
-      "default": "#00000012"
-    },
-    {
-      "type": "color",
-      "id": "tab_title_active_color",
-      "label": "Tab标题激活颜色",
-      "default": "#000000"
-    },
-    {
-      "type": "color",
-      "id": "tab_title_color",
-      "label": "Tab标题颜色",
-      "default": "#767473"
-    },
-    {
-      "type": "color",
-      "id": "pc_tab_active_line_color",
-      "label": "PC Tab栏激活划线颜色",
-      "default": "#000000"
-    },
-    {
-      "type": "color",
-      "id": "mb_tab_line_color",
-      "label": "移动Tab栏划线颜色",
-      "default": "#D9D6D2"
-    },
-    {
-      "type": "color",
-      "id": "mb_tab_active_line_color",
-      "label": "mb Tab栏激活划线颜色",
-      "default": "#2B2B2A"
-    },
-
-    {
-      "type": "number",
-      "id": "pc_padding_top",
-      "label": "PC上内边距 (Padding Top)",
-      "default": 80
-    },
-    {
-      "type": "number",
-      "id": "pc_padding_bottom",
-      "label": "PC下内边距 (Padding Bottom)",
-      "default": 80
-    },
-    {
-      "type": "number",
-      "id": "mobile_padding_top",
-      "label": "移动上内边距 (Padding Top)",
-
-      "default": 40
-    },
-    {
-      "type": "number",
-      "id": "mobile_padding_bottom",
-      "label": "移动下内边距 (Padding Bottom)",
-      "default": 40
-    },
-    {
-      "type": "text",
-      "id": "module_name",
-      "label": "模块id",
-      "info": "用于定位到本模块"
-    },
-    
-  ],
-  "blocks": [
-    {
-      "type": "title",
-      "name": "标题",
-      "settings": [
-        {
-          "type": "richtext",
-          "id": "pc_title",
-          "label": "PC标题内容 (PC Title Content)",
-          "default": "<p>这里是标题</p>"
-        },
-        {
-          "type": "richtext",
-          "id": "mb_title",
-          "label": "移动标题内容 (Mobile Title Content)"
-        },
-        {
-          "type": "color",
-          "id": "text_color",
-          "label": "文字颜色",
-          "default": "#000000"
-        },
-        {
-          "type": "number",
-          "id": "pc_margin_bottom",
-          "label": "PC下外边距 (Margin Bottom)",
-          "default": 40
-        },
-        {
-          "type": "number",
-          "id": "mobile_margin_bottom",
-          "label": "移动下外边距 (Margin Bottom)",
-          "default": 20
-        }
-      ]
-    },
-    {
-      "type": "text_content",
-      "name": "文字内容",
-      "settings": [
-        {
-          "type": "richtext",
-          "id": "pc_text",
-          "label": "PC文字内容 (PC Text Content)",
-          "default": "<p>这里是文字内容</p>"
-        },
-        {
-          "type": "richtext",
-          "id": "mb_text",
-          "label": "移动文字内容 (Mobile Text Content)",
-          "default": "<p>这里是文字内容</p>"
-        },
-        {
-          "type": "color",
-          "id": "text_color",
-          "label": "文字颜色",
-          "default": "#000000"
-        },
-        {
-          "type": "number",
-          "id": "pc_margin_bottom",
-          "label": "PC下外边距 (Margin Bottom)",
-          "default": 40
-        },
-        {
-          "type": "number",
-          "id": "mobile_margin_bottom",
-          "label": "移动下外边距 (Margin Bottom)",
-          "default": 20
-        }
-      ]
-    },
-    {
-      "name": "Video",
-      "type": "video",
-      "settings": [
-        {
-          "type": "text",
-          "id": "slide_title",
-          "label": "标题"
-        },
-        {
-          "type": "text",
-          "id": "video_url_pc",
-          "label": "Video url PC",
-          "info": "使用cdn视频时，填写视频url。防止视频模糊"
-        },
-        {
-          "type": "video",
-          "id": "video_pc",
-          "label": "Video"
-        },
-        {
-          "type": "image_picker",
-          "id": "poster_pc",
-          "label": "视频封面 PC 没有视频时显示封面"
-        },
-        {
-          "type": "video",
-          "id": "video_mb",
-          "label": "Video Mobile"
-        },
-        {
-          "type": "image_picker",
-          "id": "poster_mb",
-          "label": "视频封面 Mobile"
-        },
-
-        {
-          "type": "richtext",
-          "id": "slide_content",
-          "label": "内容(PC)"
-        },
-        {
-          "type": "richtext",
-          "id": "slide_content_mb",
-          "label": "内容(Mobile)"
-        },
-        {
-          "type": "color",
-          "id": "content_color",
-          "default": "#8F8882",
-          "label": "内容描述颜色"
-        }
-      ]
-    }
-  ],
-  "presets": [
-    {
-      "name": "Video Img Swiper Tab"
-    },
-    {
-      "name": "Tab栏的视频轮播",
-    },
-    {
-      "name": "Tab栏的视频轮播-预设",
-      "settings": {
-        "bg_color": "#ffffff",
-        "pagination_color": "#ffffff",
-        "tab_bar_bg_color": "#00000012",
-        "tab_title_active_color": "#000000",
-        "tab_title_color": "#767473",
-        "pc_tab_active_line_color": "#000000",
-        "mb_tab_line_color": "#d9d6d2",
-        "mb_tab_active_line_color": "#2b2b2a",
-        "pc_padding_top": 80,
-        "pc_padding_bottom": 80,
-        "mobile_padding_top": 40,
-        "mobile_padding_bottom": 40
-      },
-      "blocks": [
-        {
-          "type": "title",
-          "settings": {
-            "pc_title": "<p>Tab栏的视频轮播</p>",
-            "mb_title": "<p>Tab栏的视频轮播</p>",
-            "text_color": "#010101",
-            "pc_margin_bottom": 40,
-            "mobile_margin_bottom": 20
-          }
-        },
-        {
-          "type": "text_content",
-          "settings": {
-            "pc_text": "<p>Tab栏的视频轮播 视频与图片 下面是tab栏切换，新增Video Block添加tab选项</p>",
-            "mb_text": "<p>Tab栏的视频轮播 视频与图片 下面是<br/>tab栏切换，新增Video Block添加tab选项</p>",
-            "text_color": "#010101",
-            "pc_margin_bottom": 40,
-            "mobile_margin_bottom": 20
-          }
-        },
-        {
-          "type": "video",
-          "settings": {
-            "slide_title": "Tab name",
-            "video_url_pc": "",
-            "video_pc": "shopify://files/videos/preset_pc_swiper_video_video.mp4",
-            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster.png",
-            "video_mb": "shopify://files/videos/preset_mobile_swiper_video_video.mp4",
-            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster.png",
-            "slide_content": "<p>Description set here, Description set here<br/>Description set here<br/></p>",
-            "slide_content_mb": "<p>Description set here, Description set here, Description set here</p>",
-            "content_color": "#5d544c"
-          }
-        },
-        {
-          "type": "video",
-          "settings": {
-            "slide_title": "Tab name",
-            "video_url_pc": "",
-            "video_pc": "shopify://files/videos/preset_pc_swiper_video_video_1.mp4",
-            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster_1.png",
-            "video_mb": "shopify://files/videos/preset_mobile_swiper_video_video_1.mp4",
-            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster_1.png",
-            "slide_content": "<p>Description set here, Description set here<br/>Description set here</p>",
-            "slide_content_mb": "<p>Description set here, Description set here<br/>Description set here</p>",
-            "content_color": "#5d544c"
-          }
-        }
-      ]
-    }
-  ]
-}
-{% endschema %}
+{% assign non_collapsible_blocks = section.blocks
+  | reject: 'type', 'video'
+%}
+{% assign swiper_blocks = section.blocks | where: 'type', 'video' %}
+{% assign block_size = swiper_blocks.size %}
+
+<style>
+  #shopify-section-{{ section.id }} {
+    background: {{ section.settings.bg_color }};
+    padding-top: {{ section.settings.mobile_padding_top }}px;
+    padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
+  }
+  #shopify-section-{{ section.id }} .swiper-slide{
+    background: {{ section.settings.bg_color }};
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-section-{{ section.id }}  {
+      padding-top: {{ section.settings.pc_padding_top }}px;
+      padding-bottom: {{ section.settings.pc_padding_bottom }}px;
+    }
+  }
+   #shopify-section-{{ section.id }} .zz-video-tab-swiper {
+     width: 100%;
+     letter-spacing: 0;
+   }
+
+   #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
+     bottom: 9px;
+   }
+   #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+     padding: 0 8px;
+     background-color: {{ section.settings.pagination_color }};
+     opacity: 0.5;
+   }
+   #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+     opacity: 1;
+   }
+
+   #shopify-section-{{ section.id }} .swiper-slide-active .active-box-content {
+    display: block !important;
+   }
+   @media screen and (max-width: 1024px) {
+     #shopify-section-{{ section.id }} .zz-video-tab-swiper {
+       width: 100%;
+       padding: 0 20px;
+     }
+
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper {
+       width: 100%;
+
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
+       width: 100% !important;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
+       position: relative;
+       width: 100%;
+       aspect-ratio: 16 / 9;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
+       bottom: 85px;
+       left: 50%;
+       transform: translateX(-50%);
+       width: 90vw;
+       height: 48px;
+     }
+     #shopify-section-{{ section.id }}  .swiper-pagination-horizontal {
+       overflow-x: auto;       /* 启用横向滚动 */
+       white-space: nowrap;    /* 不换行，强制所有子项在一行 */
+       -webkit-overflow-scrolling: touch; /* 移动端流畅滚动（可选） */
+       scrollbar-width: none;     /* Firefox */
+       -ms-overflow-style: none;  /* IE 和 Edge */
+     }
+     #shopify-section-{{ section.id }}  .swiper-pagination-horizontal::-webkit-scrollbar {
+       display: none;             /* Chrome, Safari */
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
+      border-bottom: 1px solid {{ section.settings.mb_tab_line_color }};
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+       box-sizing: content-box;
+       margin: 0;
+       margin-right: 20px;
+       width: fit-content;
+       height: 47px;
+       line-height: 47px;
+       border-radius: 0;
+       background: none;
+       border-top: 0;
+       color: {{ section.settings.tab_title_color }};
+       opacity: 1;
+       font-weight: 700;
+       margin-bottom: -1px;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet:last-child {
+      margin: 0;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+       border-bottom: 2px solid {{ section.settings.mb_tab_active_line_color }};
+       height: 45px;
+       line-height: 45px;
+       
+       color: {{ section.settings.tab_title_active_color }};
+     }
+
+   }
+   @media screen and (min-width: 1024px) {
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper {
+       width: 80vw;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
+       width: 80vw;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
+       position: relative;
+       width: 80vw;
+       height: calc(80vw / 16 * 9);
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
+       bottom: 135px;
+       left: 50%;
+       transform: translateX(-50%);
+       width: 70vw;
+       height: 48px;
+       display: flex;
+       border-radius: 4px;
+       background: {{ section.settings.tab_bar_bg_color }};
+
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet {
+       box-sizing: content-box;
+       margin: 0;
+       width: calc(100% / {{ block_size }});
+       height: 47px;
+       line-height: 47px;
+       border-radius: 0;
+       background: none;
+       border-top: 0;
+       color: {{ section.settings.tab_title_color }};
+       opacity: 1;
+       font-weight: 700;
+       font-size: 18px;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
+       border-top: 2px solid {{ section.settings.pc_tab_active_line_color }};
+       height: 45px;
+       line-height: 45px;
+       color: {{ section.settings.tab_title_active_color }};
+       font-weight: 700;
+     }
+
+   }
+   @media screen and (min-width: 1280px) {
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper {
+      width: 1220px;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide {
+      width: 1220px;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-slide .media-box {
+       position: relative;
+       width: 1220px;
+        height: 686px;
+     }
+     #shopify-section-{{ section.id }} .zz-banner-tab-swiper .swiper-pagination-bullets {
+       width: 1030px;
+     }
+   }
+
+</style>
+
+<div 
+  class='zz-video-tab-swiper'
+  {% if section.settings.module_name != blank %}data-zz-module-name="{{ section.settings.module_name }}"{% endif %}
+>
+  <div class='fade-in-box tw-flex tw-flex-col tw-justify-center'>
+    {% for block in non_collapsible_blocks %}
+      {% case block.type %}
+        {% when 'title' %}
+          {% render 'zz-h2',
+            title: block.settings.pc_title,
+            title_mb: block.settings.mb_title,
+            title_color: block.settings.text_color,
+            class_name: 'content-title tw-text-center'
+          %}
+          <style>
+            #shopify-section-{{section.id}} .content-title {
+              margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
+            }
+            @media screen and (min-width: 1024px) {
+              #shopify-section-{{section.id}} .content-title {
+                margin-bottom: {{ block.settings.pc_margin_bottom }}px;
+              }
+            }
+          </style>
+        {% when 'text_content' %}
+          {% render 'zz-content-text',
+            text: block.settings.pc_text,
+            mb_text: block.settings.mb_text,
+            text_color: block.settings.text_color,
+            class_name: 'content-text tw-text-center'
+          %}
+          <style>
+            #shopify-section-{{section.id}} .content-text {
+              margin-bottom: {{ block.settings.mobile_margin_bottom }}px;
+            }
+            @media screen and (min-width: 1024px) {
+              #shopify-section-{{section.id}} .content-text {
+                margin-bottom: {{ block.settings.pc_margin_bottom }}px;
+              }
+            }
+          </style>
+      {% endcase %}
+    {% endfor %}
+  </div>
+
+  <div class='zz-swiper-container'>
+    <div
+      class='swiper zz-banner-tab-swiper zz-banner-tab-swiper-{{ section.id }} lg:tw-w-[80vw] xl:tw-w-[64vw]'
+    >
+      <div class='swiper-wrapper'>
+        {% for banner in swiper_blocks %}
+          <div class='swiper-slide'>
+            <div class='media-box tw-rounded-[10px] lg:tw-rounded-[16px] tw-overflow-hidden'>
+              {% if banner.settings.video_pc != blank or banner.settings.video_url_pc != blank %}
+                {% if banner.settings.video_url_pc != blank %}
+                  {% assign pc_video = banner.settings.video_url_pc %}
+                {% else %}
+                  {% assign pc_video = banner.settings.video_pc %}
+                {% endif %}
+                {% render 'zz-video',
+                  pc_video: pc_video,
+                  pc_poster: banner.settings.poster_pc,
+                  mb_video: banner.settings.video_mb,
+                  mb_poster: banner.settings.poster_mb,
+                  lazy: true,
+                  class: 'tw-w-full tw-h-full tw-object-cover',
+                  autoplay: true,
+                  loop: false,
+                  muted: true
+                %}
+              {% else %}
+                {%- if banner.settings.poster_pc != blank -%}
+                  {%
+                    render 'zz-img',
+                    pc_image: banner.settings.poster_pc,
+                    mb_image: banner.settings.poster_mb | default: banner.settings.poster_pc,
+                    image_alt: banner.settings.slide_title | escape,
+                  %}
+                {% endif %}
+              {% endif %}
+            </div>
+            <div class='slide-box tw-mt-[78px] lg:tw-mt-[148px] tw-h-[60px] lg:tw-h-[80px]'>
+              <div class='active-box-content tw-hidden slide-content lg:tw-w-[814px] lg:tw-mx-auto tw-mt-[8px]'>
+                {% render 'zz-content-text',
+                  text: banner.settings.slide_content,
+                  mb_text: banner.settings.slide_content_mb,
+                  text_color: banner.settings.content_color,
+                  pc_font_size: 16,
+                  mobile_font_size: 12,
+                  pc_text_align: 'center',
+                  mobile_text_align: 'center'
+                %}
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+
+      <!-- Pagination indicator -->
+      <div class='swiper-pagination'></div>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    let isDesktop = window.innerWidth > 1023;
+  // 添加标题数组
+  const slideTitles = [
+    {% for block in swiper_blocks %}
+      "{{ block.settings.slide_title }}",
+    {% endfor %}
+  ];
+
+  const swiperClassName = '.zz-banner-tab-swiper-{{ section.id }}';
+    const tabSwiper = new Swiper(swiperClassName, {
+      loop: true,
+      slidesPerView: 'auto',
+      centeredSlides: true,
+      spaceBetween: isDesktop ? 24 : 8,
+
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+        renderBullet: function (index, className) {
+          const title = slideTitles[index % slideTitles.length];
+          return '<span class="' + className + '">' + title + '</span>';
+        }
+      },
+      effect: 'fade',
+      on: {
+
+        slideChangeTransitionEnd: function () {
+          handleVideoOnSlideChange()
+        },
+        slideChange: function (e) {
+          if (!isDesktop) {
+            scrollPaginationToCenter();
+          }
+        },
+        slideChangeTransitionStart: function () {
+          const section = document.getElementById(
+            'shopify-section-{{section.id}}'
+          );
+          const allvideo = section.querySelectorAll('video');
+          // 播放当前 active slide 中的视频
+          const activeSlide = section.querySelector('.swiper-slide-active');
+          const media = getVisibleDisplayMedias(activeSlide);
+          if (media.type === 'video') {
+            media.video.removeEventListener('ended', endedHandler);
+          }
+        }
+      },
+    });
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          // 当 swiper-wrapper 第一次出现在视口中时执行
+          setTimeout(() => {
+            handleVideoOnSlideChange();
+          }, 200);
+          // 执行一次后取消观察
+          observer.unobserve(entry.target);
+        }
+      });
+    }, {
+      threshold: 0.2 // 当 20% 的元素可见时触发
+    });
+    const section = document.getElementById(
+      'shopify-section-{{section.id}}'
+    );
+    const swiperWrapper = section.querySelector('.swiper-wrapper');
+    if (swiperWrapper) {
+      observer.observe(swiperWrapper);
+    }
+
+
+    function getVisibleDisplayMedias(container) {
+      const videos = container.querySelectorAll('video');
+      const video = Array.from(videos).find((video) => {
+        const style = window.getComputedStyle(video);
+        return style.display !== 'none';
+      });
+      if (video) {
+        return {
+          video,
+          type: 'video'
+        }
+      } else {
+        const images = container.querySelectorAll('img');
+        const image = Array.from(images).find((image) => {
+          const style = window.getComputedStyle(image);
+          return style.display !== 'none';
+        });
+        if (image) {
+          return {
+            image,
+            type: 'image'
+          }
+        }
+      }
+      return null;
+    }
+
+    function scrollPaginationToCenter() {
+      // 获取当前section
+      const section = document.getElementById(
+        'shopify-section-{{section.id}}'
+      );
+      const paginationContainer = section.querySelector('.swiper-pagination');
+      const activeBullet = paginationContainer.querySelector('.swiper-pagination-bullet-active');
+
+      if (activeBullet) {
+        const containerWidth = paginationContainer.offsetWidth;
+        const bulletLeft = activeBullet.offsetLeft;
+        const bulletWidth = activeBullet.offsetWidth;
+
+        // 计算需要滚动的位置，使当前bullet居中
+        const scrollPosition = bulletLeft - (containerWidth / 2) + (bulletWidth / 2);
+
+        paginationContainer.scrollTo({
+          left: scrollPosition,
+          behavior: 'smooth'
+        });
+      }
+    }
+    function endedHandler () {
+        if (tabSwiper.isEnd) {
+          tabSwiper.slideTo(0);
+        } else {
+          tabSwiper.slideNext();
+        }
+        this.removeEventListener('ended', endedHandler);
+    };
+    function handleMediaNext(type, videoDom) {
+      if (type === 'video') {
+        videoDom.addEventListener('ended', endedHandler);
+      } else if (type === 'image') {
+
+        setTimeout(() => {
+          if (tabSwiper.isEnd) {
+            tabSwiper.slideTo(0);
+          } else {
+            tabSwiper.slideNext();
+          }
+        }, 5000);
+      }
+    }
+
+    function handleVideoOnSlideChange() {
+      // 暂停所有视频
+
+      const section = document.getElementById(
+        'shopify-section-{{section.id}}'
+      );
+      const allvideo = section.querySelectorAll('video');
+      // 播放当前 active slide 中的视频
+      const activeSlide = section.querySelector('.swiper-slide-active');
+      const media = getVisibleDisplayMedias(activeSlide);
+      if (media.type === 'video') {
+        allvideo.forEach((item) => {
+          if (item === media.video) {
+            media.video.currentTime = 0;
+            media.video.play();
+            handleMediaNext('video', media.video);
+
+          } else {
+            item.currentTime = 0;
+            item.pause();
+          }
+        });
+      } else if (media.type === 'image') {
+        // 处理图片的情况
+        handleMediaNext('image', media.image);
+        allvideo.forEach((item) => {
+          item.pause();
+          item.currentTime = 0;
+        });
+      }
+
+    }
+
+  })
+</script>
+
+{% schema %}
+{
+  "name": "Video Img Swiper Tab",
+  "settings": [
+    {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#ffffff",
+      "label": "背景色"
+    },
+
+    {
+      "type": "color",
+      "id": "pagination_color",
+      "default": "#ffffff",
+      "label": "轮播导航圆圈颜色"
+    },
+    {
+      "type": "color",
+      "id": "tab_bar_bg_color",
+      "label": "PC Tab栏背景颜色",
+      "default": "#00000012"
+    },
+    {
+      "type": "color",
+      "id": "tab_title_active_color",
+      "label": "Tab标题激活颜色",
+      "default": "#000000"
+    },
+    {
+      "type": "color",
+      "id": "tab_title_color",
+      "label": "Tab标题颜色",
+      "default": "#767473"
+    },
+    {
+      "type": "color",
+      "id": "pc_tab_active_line_color",
+      "label": "PC Tab栏激活划线颜色",
+      "default": "#000000"
+    },
+    {
+      "type": "color",
+      "id": "mb_tab_line_color",
+      "label": "移动Tab栏划线颜色",
+      "default": "#D9D6D2"
+    },
+    {
+      "type": "color",
+      "id": "mb_tab_active_line_color",
+      "label": "mb Tab栏激活划线颜色",
+      "default": "#2B2B2A"
+    },
+
+    {
+      "type": "number",
+      "id": "pc_padding_top",
+      "label": "PC上内边距 (Padding Top)",
+      "default": 80
+    },
+    {
+      "type": "number",
+      "id": "pc_padding_bottom",
+      "label": "PC下内边距 (Padding Bottom)",
+      "default": 80
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_top",
+      "label": "移动上内边距 (Padding Top)",
+
+      "default": 40
+    },
+    {
+      "type": "number",
+      "id": "mobile_padding_bottom",
+      "label": "移动下内边距 (Padding Bottom)",
+      "default": 40
+    },
+    {
+      "type": "text",
+      "id": "module_name",
+      "label": "模块id",
+      "info": "用于定位到本模块"
+    },
+    
+  ],
+  "blocks": [
+    {
+      "type": "title",
+      "name": "标题",
+      "settings": [
+        {
+          "type": "richtext",
+          "id": "pc_title",
+          "label": "PC标题内容 (PC Title Content)",
+          "default": "<p>这里是标题</p>"
+        },
+        {
+          "type": "richtext",
+          "id": "mb_title",
+          "label": "移动标题内容 (Mobile Title Content)"
+        },
+        {
+          "type": "color",
+          "id": "text_color",
+          "label": "文字颜色",
+          "default": "#000000"
+        },
+        {
+          "type": "number",
+          "id": "pc_margin_bottom",
+          "label": "PC下外边距 (Margin Bottom)",
+          "default": 40
+        },
+        {
+          "type": "number",
+          "id": "mobile_margin_bottom",
+          "label": "移动下外边距 (Margin Bottom)",
+          "default": 20
+        }
+      ]
+    },
+    {
+      "type": "text_content",
+      "name": "文字内容",
+      "settings": [
+        {
+          "type": "richtext",
+          "id": "pc_text",
+          "label": "PC文字内容 (PC Text Content)",
+          "default": "<p>这里是文字内容</p>"
+        },
+        {
+          "type": "richtext",
+          "id": "mb_text",
+          "label": "移动文字内容 (Mobile Text Content)",
+          "default": "<p>这里是文字内容</p>"
+        },
+        {
+          "type": "color",
+          "id": "text_color",
+          "label": "文字颜色",
+          "default": "#000000"
+        },
+        {
+          "type": "number",
+          "id": "pc_margin_bottom",
+          "label": "PC下外边距 (Margin Bottom)",
+          "default": 40
+        },
+        {
+          "type": "number",
+          "id": "mobile_margin_bottom",
+          "label": "移动下外边距 (Margin Bottom)",
+          "default": 20
+        }
+      ]
+    },
+    {
+      "name": "Video",
+      "type": "video",
+      "settings": [
+        {
+          "type": "text",
+          "id": "slide_title",
+          "label": "标题"
+        },
+        {
+          "type": "text",
+          "id": "video_url_pc",
+          "label": "Video url PC",
+          "info": "使用cdn视频时，填写视频url。防止视频模糊"
+        },
+        {
+          "type": "video",
+          "id": "video_pc",
+          "label": "Video"
+        },
+        {
+          "type": "image_picker",
+          "id": "poster_pc",
+          "label": "视频封面 PC 没有视频时显示封面"
+        },
+        {
+          "type": "video",
+          "id": "video_mb",
+          "label": "Video Mobile"
+        },
+        {
+          "type": "image_picker",
+          "id": "poster_mb",
+          "label": "视频封面 Mobile"
+        },
+
+        {
+          "type": "richtext",
+          "id": "slide_content",
+          "label": "内容(PC)"
+        },
+        {
+          "type": "richtext",
+          "id": "slide_content_mb",
+          "label": "内容(Mobile)"
+        },
+        {
+          "type": "color",
+          "id": "content_color",
+          "default": "#8F8882",
+          "label": "内容描述颜色"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Video Img Swiper Tab"
+    },
+    {
+      "name": "Tab栏的视频轮播",
+    },
+    {
+      "name": "Tab栏的视频轮播-预设",
+      "settings": {
+        "bg_color": "#ffffff",
+        "pagination_color": "#ffffff",
+        "tab_bar_bg_color": "#00000012",
+        "tab_title_active_color": "#000000",
+        "tab_title_color": "#767473",
+        "pc_tab_active_line_color": "#000000",
+        "mb_tab_line_color": "#d9d6d2",
+        "mb_tab_active_line_color": "#2b2b2a",
+        "pc_padding_top": 80,
+        "pc_padding_bottom": 80,
+        "mobile_padding_top": 40,
+        "mobile_padding_bottom": 40
+      },
+      "blocks": [
+        {
+          "type": "title",
+          "settings": {
+            "pc_title": "<p>Tab栏的视频轮播</p>",
+            "mb_title": "<p>Tab栏的视频轮播</p>",
+            "text_color": "#010101",
+            "pc_margin_bottom": 40,
+            "mobile_margin_bottom": 20
+          }
+        },
+        {
+          "type": "text_content",
+          "settings": {
+            "pc_text": "<p>Tab栏的视频轮播 视频与图片 下面是tab栏切换，新增Video Block添加tab选项</p>",
+            "mb_text": "<p>Tab栏的视频轮播 视频与图片 下面是<br/>tab栏切换，新增Video Block添加tab选项</p>",
+            "text_color": "#010101",
+            "pc_margin_bottom": 40,
+            "mobile_margin_bottom": 20
+          }
+        },
+        {
+          "type": "video",
+          "settings": {
+            "slide_title": "Tab name",
+            "video_url_pc": "",
+            "video_pc": "shopify://files/videos/preset_pc_swiper_video_video.mp4",
+            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster.png",
+            "video_mb": "shopify://files/videos/preset_mobile_swiper_video_video.mp4",
+            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster.png",
+            "slide_content": "<p>Description set here, Description set here<br/>Description set here<br/></p>",
+            "slide_content_mb": "<p>Description set here, Description set here, Description set here</p>",
+            "content_color": "#5d544c"
+          }
+        },
+        {
+          "type": "video",
+          "settings": {
+            "slide_title": "Tab name",
+            "video_url_pc": "",
+            "video_pc": "shopify://files/videos/preset_pc_swiper_video_video_1.mp4",
+            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster_1.png",
+            "video_mb": "shopify://files/videos/preset_mobile_swiper_video_video_1.mp4",
+            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster_1.png",
+            "slide_content": "<p>Description set here, Description set here<br/>Description set here</p>",
+            "slide_content_mb": "<p>Description set here, Description set here<br/>Description set here</p>",
+            "content_color": "#5d544c"
+          }
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}