zz-shopify-components 0.0.27 → 0.0.28-beta.2

package/blocks/zz-video-swiper-perview.liquid

@@ -1,585 +1,585 @@
-{% assign block_size = block.blocks.size %}
-{% assign bullets_width_half = block_size
-  | minus: 1
-  | times: 14
-  | plus: 6
-  | divided_by: 2.0
-  | ceil
-%}
-{% assign btn_offset = bullets_width_half | plus: 14 | plus: 36 %}
-
-<style>
-  #shopify-block-{{block.id}} {
-    background: {{ block.settings.bg_color }};
-    width: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
-    position: relative;
-  }
-  #shopify-block-{{block.id}} .zz-video-swiper-preview {
-    width: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
-    height: fit-content;
-    position: relative;
-    letter-spacing: 0;
-  }
-
-  #shopify-block-{{block.id}} .swiper-button-next,
-  #shopify-block-{{block.id}} .swiper-button-prev {
-    top: 0;
-    width: 48px;
-    height: 48px;
-  }
-  #shopify-block-{{block.id}} .swiper-button-prev {
-    left: unset;
-    right: 50%;
-    transform: translate(-46.4063vw, 23.4375vw);
-  }
-  #shopify-block-{{block.id}} .swiper-button-next {
-    right: unset;
-    left: 50%;
-    transform: translate(46.4063vw, 23.4375vw);
-  }
-  #shopify-block-{{block.id}} .swiper-button-next:after,
-  #shopify-block-{{block.id}} .swiper-button-prev:after {
-    display: none;
-  }
-  #shopify-block-{{block.id}} .swiper-button-next.swiper-button-disabled, #shopify-block-{{block.id}} .swiper-button-prev.swiper-button-disabled {
-    opacity: 0.5;
-  }
-
-  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet {
-    margin: 0 8px;
-    width: 48px;
-    height: 4px;
-    border-radius: 3px;
-    background: {{ block.settings.pagination_color | color_modify: 'alpha', 0.3 }};
-    opacity: 1;
-    transition: 0.3s;
-  }
-  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet-active {
-    position: relative;
-    width: 120px;
-    {% if block.settings.if_autoplay == false %}
-     background: #fff;
-    {% endif %}
-  }
-  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet-active .progress-line {
-    display: block;
-    position: absolute;
-    width:0;
-    height: 4px;
-    left: 0;
-    top: 0;
-    background-color: {{ block.settings.pagination_color }};
-    border-radius: 3px;
-  }
-  #shopify-block-{{block.id}} .swiper-slide-active .active-box-content {
-    display: block !important;
-  }
-
-  @media screen and (max-width: 1023px) {
-    #shopify-block-{{block.id}} .zz-video-swiper-preview {
-      padding-bottom: 40px;
-    }
-
-    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-slide .banner-item::after {
-      display: none;
-    }
-    #shopify-block-{{block.id}} .swiper-button-next,
-    #shopify-block-{{block.id}} .swiper-button-prev {
-      z-index: 99;
-      top: unset;
-      bottom: 0;
-      width: 36px;
-      height: 36px;
-    }
-    #shopify-block-{{block.id}} .swiper-button-prev {
-      left: 50%;
-      transform: translate(-{{ btn_offset }}px, 0px);
-    }
-    #shopify-block-{{block.id}} .swiper-button-next {
-      left: unset;
-      right: 50%;
-      transform: translate({{ btn_offset }}px, 0px);
-    }
-    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet {
-      margin: 0 4px;
-      width: 6px;
-      height: 6px;
-      background-color: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.3 }};
-    }
-    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
-      width: 6px;
-      background-color: {{ block.settings.mb_pagination_color }};
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    #shopify-block-{{block.id}} .content-title-h2 {
-      font-size: 60px;
-    }
-    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets {
-      {% if block.settings.has_title_and_content %}
-        bottom: 220px;
-      {% else %}
-        bottom: 21px;
-      {% endif %}
-    }
-    #shopify-block-{{block.id}} .swiper-button-next.swiper-button-disabled, #shopify-block-{{block.id}} .swiper-button-prev.swiper-button-disabled {
-      opacity: 0;
-    }
-    #shopify-block-{{block.id}} .zz-video-swiper-preview::before {
-      content: '';
-      display: block;
-      position: absolute;
-      left: calc(50% - 30px);
-      top: 0;
-      width: 83.3594vw;
-      height: 46.875vw;
-      transform: translateX(-150%);
-      z-index: 2;
-      border-radius: 16px;
-      background: {{ block.settings.gradient_color_left }};
-    }
-
-    #shopify-block-{{block.id}} .zz-video-swiper-preview::after {
-      content: '';
-      display: block;
-      position: absolute;
-      right: calc(50% - 30px);
-      top: 0;
-      width: 83.3594vw;
-      height: 46.875vw;
-      transform: translateX(150%);
-      z-index: 2;
-      border-radius: 16px;
-      background: {{ block.settings.gradient_color_right }};
-    }
-
-
-  }
-  @media screen and (min-width: 1280px) {
-    #shopify-block-{{block.id}} .zz-video-swiper-preview::before,
-    #shopify-block-{{block.id}} .zz-video-swiper-preview::after {
-      width: 1067px;
-      height: 600px;
-    }
-    #shopify-block-{{block.id}} .swiper-button-prev {
-      transform: translate(-594px, 300px);
-    }
-    #shopify-block-{{block.id}} .swiper-button-next {
-      transform: translate(594px, 300px);
-    }
-
-  }
-</style>
-
-<div
-  class='zz-video-swiper-preview zz-video-swiper-preview-{{ block.id }}'
->
-  <div class='swiper-wrapper'>
-    {% content_for 'blocks' %}
-  </div>
-
-  <!-- If we need navigation buttons -->
-  <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
-    <span class='lg:tw-hidden'>
-      {% if block.settings.prev_icon != blank %}
-        {{
-          block.settings.prev_icon
-          | image_url: width: 48
-          | image_tag:
-            alt: 'prev',
-            class: 'tw-w-full tw-h-full tw-object-contain'
-        }}
-      {% else %}
-        {% render 'zz-prev-next-btn',
-          type: 'prev',
-          color_type: block.settings.prev_next_type
-        %}
-      {% endif %}
-      
-    </span>
-    <span class='max-lg:tw-hidden'>
-      {% render 'zz-prev-next-btn', type: 'prev', color_type: 'light' %}
-    </span>
-  </div>
-  <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
-    <span class='lg:tw-hidden'>
-      {% if block.settings.next_icon != blank %}
-        {{
-          block.settings.next_icon
-          | image_url: width: 48
-          | image_tag:
-            alt: 'prev',
-            class: 'tw-w-full tw-h-full tw-object-contain'
-        }}
-      {% else %}
-        {% render 'zz-prev-next-btn',
-          type: 'next',
-          color_type: block.settings.prev_next_type
-        %}
-      {% endif %}
-      
-    </span>
-    <span class='max-lg:tw-hidden'>
-      {% render 'zz-prev-next-btn', type: 'next', color_type: 'light' %}
-    </span>
-  </div>
-
-  <!-- Pagination indicator -->
-  <div class='swiper-pagination'></div>
-</div>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function () {
-    const swiperClassName = '.zz-video-swiper-preview-{{ block.id }}';
-    let isDesktop = window.innerWidth > 1023;
-    // 获取 class zz-accessories-swiper 的元素 且data-id 为 block.id 的元素
-    const zzAccessoriesSwiper = document.querySelector(swiperClassName);
-    const swiperWrapper = zzAccessoriesSwiper.querySelector('.swiper-wrapper');
-    // 获取当前 swiper-wrapper 下面 所有 第一层 div
-    const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
-    // 给每个 swiper-slide 添加 class swiper-slide
-    swiperSlides.forEach((slide) => {
-      slide.classList.add('swiper-slide');
-    });
-    let progressInterval = null;
-    let progressTimer = null;
-
-    const prevSwiper = new Swiper(swiperClassName, {
-      {% if block.settings.if_loop == true %}
-      loop: true,
-      {% endif %}
-      slidesPerView: 'auto',
-      centeredSlides: true,
-      spaceBetween: isDesktop ? 30 : 8,
-      navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-      },
-      pagination: {
-        el: '.swiper-pagination',
-        clickable: true,
-        renderBullet: function (index, className) {
-          return `
-          <span class="${className}">
-            <span class="progress-line"></span>
-          </span>`;
-        },
-      },
-      effect: 'slide',
-      on: {
-        slideChangeTransitionEnd: function () {
-          handleVideoOnSlideChange();
-        },
-        slideChangeTransitionStart: function () {
-          if (progressInterval) {
-            clearInterval(progressInterval);
-          }
-          if (progressTimer) {
-            clearTimeout(progressTimer);
-          }
-        },
-        slideChange: function () {
-          if (isDesktop) {
-            const block = document.getElementById('shopify-block-{{block.id}}');
-            block
-              .querySelectorAll('.swiper-pagination-bullet')
-              .forEach((bullet) => {
-                const progressBar = bullet.querySelector('.progress-line');
-                progressBar.style.transition = 'none';
-                progressBar.style.width = '0';
-              });
-          }
-        },
-      },
-    });
-
-    // 使用 Intersection Observer 监听 swiper-wrapper 的可见性
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            // 当 swiper-wrapper 第一次出现在视口中时执行
-            setTimeout(() => {
-              handleVideoOnSlideChange();
-            }, 200);
-            // 执行一次后取消观察
-            observer.unobserve(entry.target);
-          }
-        });
-      },
-      {
-        threshold: 0.2, // 当 20% 的元素可见时触发
-      }
-    );
-
-    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;
-    }
-    const endedHandler = function () {
-
-      if (prevSwiper.isEnd) {
-        prevSwiper.slideTo(0);
-      } else {
-        prevSwiper.slideNext();
-      }
-      if (progressInterval) {
-        clearInterval(progressInterval);
-      }
-      this.removeEventListener('ended', endedHandler);
-    };
-
-    function updataMediaProgress(type, videoDom) {
-      const block = document.getElementById('shopify-block-{{block.id}}');
-      const activeBullet = block.querySelector(
-        '.swiper-pagination-bullet-active'
-      );
-      const progressBar = activeBullet.querySelector('.progress-line');
-      if (progressBar) {
-        if (progressInterval) {
-          clearInterval(progressInterval);
-        }
-        if (progressTimer) {
-          clearTimeout(progressTimer);
-        }
-        if (type === 'video') {
-          // 添加新的事件监听器
-          if (isDesktop) {
-            progressInterval = setInterval(() => {
-              const progress = videoDom.currentTime / videoDom.duration;
-              progressBar.style.transition = '0.2s';
-              progressBar.style.width = `${progress * 100}%`;
-            }, 100);
-          }
-
-          videoDom.addEventListener('ended', endedHandler);
-        } else if (type === 'image') {
-          if (isDesktop) {
-            progressBar.style.transition = '10s linear';
-            progressBar.style.width = '100%';
-          }
-          progressTimer = setTimeout(() => {
-            if (prevSwiper.isEnd) {
-              prevSwiper.slideTo(0);
-            } else {
-              prevSwiper.slideNext();
-            }
-          }, 10000);
-        }
-      }
-    }
-
-    function handleVideoOnSlideChange() {
-      // 暂停所有视频
-      const block = document.getElementById('shopify-block-{{block.id}}');
-      const allvideo = block.querySelectorAll('video');
-      // 播放当前 active slide 中的视频
-      const activeSlide = block.querySelector('.swiper-slide-active');
-      const media = getVisibleDisplayMedias(activeSlide);
-      // 重置进度条
-      if (isDesktop) {
-        const activeBullet = block.querySelector(
-          '.swiper-pagination-bullet-active'
-        );
-        const progressBar = activeBullet.querySelector('.progress-line');
-        if (progressBar) {
-          progressBar.style.transition = 'none';
-          progressBar.style.width = '0';
-        }
-      }
-      if (media.type === 'video') {
-        allvideo.forEach((item) => {
-          if (item === media.video) {
-            media.video.currentTime = 0;
-            if (media.video.paused) {
-              media.video.play();
-            }
-
-            if('{{ block.settings.if_autoplay }}' == 'true') {
-              updataMediaProgress('video', media.video);
-            }
-          } else {
-            item.pause();
-          }
-        });
-      } else if (media.type === 'image') {
-        // 处理图片的情况
-        if('{{ block.settings.if_autoplay }}' == 'true') {
-          updataMediaProgress('image', media.image);
-        }
-        allvideo.forEach((item) => {
-          item.pause();
-        });
-      }
-    }
-  });
-</script>
-
-{% schema %}
-{
-  "name": "Video Swiper Preview",
-  "class": "zz-video-swiper-preview-block",
-  "settings": [
-    {
-      "type": "color",
-      "id": "bg_color",
-      "default": "#ffffff",
-      "label": "背景色"
-    },
-
-    {
-      "type": "color",
-      "id": "pagination_color",
-      "default": "#ffffff",
-      "label": "轮播导航圆圈颜色"
-    },
-    {
-      "type": "color",
-      "id": "mb_pagination_color",
-      "default": "#000000",
-      "label": "移动端轮播导航圆圈颜色"
-    },
-    {
-      "type": "checkbox",
-      "id": "if_loop",
-      "label": "是否循环播放",
-      "default": false
-    },
-    {
-      "type": "checkbox",
-      "id": "if_autoplay",
-      "label": "是否自动轮播",
-      "default": false
-    },
-    {
-      "type": "checkbox",
-      "id": "has_gradient",
-      "label": "是否有左右渐变色",
-      "default": false
-    },
-    {
-      "type": "text",
-      "id": "gradient_color_left",
-      "label": "渐变色左边颜色",
-      "default": "linear-gradient(270deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
-      "visible_if": "{{ block.settings.has_gradient == true }}"
-    },
-    {
-      "type": "text",
-      "id": "gradient_color_right",
-      "label": "渐变色右边颜色",
-      "default": "linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
-      "visible_if": "{{ block.settings.has_gradient == true }}"
-    },
-    {
-      "type": "select",
-      "id": "prev_next_type",
-      "label": "prev next 颜色",
-      "options": [
-        { "value": "dark", "label": "黑色" },
-        { "value": "light", "label": "白色" },
-      ],
-      "default": "dark"
-    },
-    {
-      "type": "image_picker",
-      "id": "prev_icon",
-      "label": "轮播上一张图标 Mobile"
-    },
-    {
-      "type": "image_picker",
-      "id": "next_icon",
-      "label": "轮播下一张图标 Mobile"
-    },
-    {
-      "type": "checkbox",
-      "id": "has_title_and_content",
-      "label": "是否有标题与内容",
-      "default": true
-    }
-  ],
-  "blocks": [
-    {
-      "type": "zz-video-swiper-perview-item"
-    }
-  ],
-  "presets": [
-    {
-      "name": "Video Swiper Preview"
-    },
-    {
-      "name": "可预览轮播图",
-      "settings": {
-        "bg_color": "#ffffff",
-        "pagination_color": "#ffffff",
-        "mb_pagination_color": "#000000",
-        "if_loop": false,
-        "if_autoplay": false,
-        "has_gradient": true,
-        "gradient_color_left": "linear-gradient(270deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
-        "gradient_color_right": "linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
-        "prev_next_type": "dark",
-        "has_title_and_content": true
-      },
-      "blocks": [
-        {
-          "type": "zz-video-swiper-perview-item",
-          "settings": {
-            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster.png",
-            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster.png",
-            "has_title_and_content": true,
-            "heading": "Item Name",
-            "title_color": "#333232",
-            "row_content": "<p>Description set here, Description set here.</p>",
-            "content_color": "#5d544c",
-          },
-        }, 
-        {
-          "type": "zz-video-swiper-perview-item",
-          "settings": {
-            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster_1.png",
-            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster_1.png",
-            "has_title_and_content": true,
-            "heading": "Item Name",
-            "title_color": "#333232",
-            "row_content": "<p>Description set here, Description set here.</p>",
-            "content_color": "#5d544c",
-          },
-        
-        }
-      ]
-    }
-  ]
-}
-{% endschema %}
+{% assign block_size = block.blocks.size %}
+{% assign bullets_width_half = block_size
+  | minus: 1
+  | times: 14
+  | plus: 6
+  | divided_by: 2.0
+  | ceil
+%}
+{% assign btn_offset = bullets_width_half | plus: 14 | plus: 36 %}
+
+<style>
+  #shopify-block-{{block.id}} {
+    background: {{ block.settings.bg_color }};
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+  }
+  #shopify-block-{{block.id}} .zz-video-swiper-preview {
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: fit-content;
+    position: relative;
+    letter-spacing: 0;
+  }
+
+  #shopify-block-{{block.id}} .swiper-button-next,
+  #shopify-block-{{block.id}} .swiper-button-prev {
+    top: 0;
+    width: 48px;
+    height: 48px;
+  }
+  #shopify-block-{{block.id}} .swiper-button-prev {
+    left: unset;
+    right: 50%;
+    transform: translate(-46.4063vw, 23.4375vw);
+  }
+  #shopify-block-{{block.id}} .swiper-button-next {
+    right: unset;
+    left: 50%;
+    transform: translate(46.4063vw, 23.4375vw);
+  }
+  #shopify-block-{{block.id}} .swiper-button-next:after,
+  #shopify-block-{{block.id}} .swiper-button-prev:after {
+    display: none;
+  }
+  #shopify-block-{{block.id}} .swiper-button-next.swiper-button-disabled, #shopify-block-{{block.id}} .swiper-button-prev.swiper-button-disabled {
+    opacity: 0.5;
+  }
+
+  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: 0 8px;
+    width: 48px;
+    height: 4px;
+    border-radius: 3px;
+    background: {{ block.settings.pagination_color | color_modify: 'alpha', 0.3 }};
+    opacity: 1;
+    transition: 0.3s;
+  }
+  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet-active {
+    position: relative;
+    width: 120px;
+    {% if block.settings.if_autoplay == false %}
+     background: #fff;
+    {% endif %}
+  }
+  #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet-active .progress-line {
+    display: block;
+    position: absolute;
+    width:0;
+    height: 4px;
+    left: 0;
+    top: 0;
+    background-color: {{ block.settings.pagination_color }};
+    border-radius: 3px;
+  }
+  #shopify-block-{{block.id}} .swiper-slide-active .active-box-content {
+    display: block !important;
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{block.id}} .zz-video-swiper-preview {
+      padding-bottom: 40px;
+    }
+
+    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-slide .banner-item::after {
+      display: none;
+    }
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      z-index: 99;
+      top: unset;
+      bottom: 0;
+      width: 36px;
+      height: 36px;
+    }
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      left: 50%;
+      transform: translate(-{{ btn_offset }}px, 0px);
+    }
+    #shopify-block-{{block.id}} .swiper-button-next {
+      left: unset;
+      right: 50%;
+      transform: translate({{ btn_offset }}px, 0px);
+    }
+    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet {
+      margin: 0 4px;
+      width: 6px;
+      height: 6px;
+      background-color: {{ block.settings.mb_pagination_color | color_modify: 'alpha', 0.3 }};
+    }
+    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
+      width: 6px;
+      background-color: {{ block.settings.mb_pagination_color }};
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{block.id}} .content-title-h2 {
+      font-size: 60px;
+    }
+    #shopify-block-{{block.id}} .zz-video-swiper-preview .swiper-pagination-bullets {
+      {% if block.settings.has_title_and_content %}
+        bottom: 220px;
+      {% else %}
+        bottom: 21px;
+      {% endif %}
+    }
+    #shopify-block-{{block.id}} .swiper-button-next.swiper-button-disabled, #shopify-block-{{block.id}} .swiper-button-prev.swiper-button-disabled {
+      opacity: 0;
+    }
+    #shopify-block-{{block.id}} .zz-video-swiper-preview::before {
+      content: '';
+      display: block;
+      position: absolute;
+      left: calc(50% - 30px);
+      top: 0;
+      width: 83.3594vw;
+      height: 46.875vw;
+      transform: translateX(-150%);
+      z-index: 2;
+      border-radius: 16px;
+      background: {{ block.settings.gradient_color_left }};
+    }
+
+    #shopify-block-{{block.id}} .zz-video-swiper-preview::after {
+      content: '';
+      display: block;
+      position: absolute;
+      right: calc(50% - 30px);
+      top: 0;
+      width: 83.3594vw;
+      height: 46.875vw;
+      transform: translateX(150%);
+      z-index: 2;
+      border-radius: 16px;
+      background: {{ block.settings.gradient_color_right }};
+    }
+
+
+  }
+  @media screen and (min-width: 1280px) {
+    #shopify-block-{{block.id}} .zz-video-swiper-preview::before,
+    #shopify-block-{{block.id}} .zz-video-swiper-preview::after {
+      width: 1067px;
+      height: 600px;
+    }
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      transform: translate(-594px, 300px);
+    }
+    #shopify-block-{{block.id}} .swiper-button-next {
+      transform: translate(594px, 300px);
+    }
+
+  }
+</style>
+
+<div
+  class='zz-video-swiper-preview zz-video-swiper-preview-{{ block.id }}'
+>
+  <div class='swiper-wrapper'>
+    {% content_for 'blocks' %}
+  </div>
+
+  <!-- If we need navigation buttons -->
+  <div class='swiper-button-prev {% if block_size <= 1 %} tw-hidden {% endif %}'>
+    <span class='lg:tw-hidden'>
+      {% if block.settings.prev_icon != blank %}
+        {{
+          block.settings.prev_icon
+          | image_url: width: 48
+          | image_tag:
+            alt: 'prev',
+            class: 'tw-w-full tw-h-full tw-object-contain'
+        }}
+      {% else %}
+        {% render 'zz-prev-next-btn',
+          type: 'prev',
+          color_type: block.settings.prev_next_type
+        %}
+      {% endif %}
+      
+    </span>
+    <span class='max-lg:tw-hidden'>
+      {% render 'zz-prev-next-btn', type: 'prev', color_type: 'light' %}
+    </span>
+  </div>
+  <div class='swiper-button-next {% if block_size <= 1 %} tw-hidden {% endif %}'>
+    <span class='lg:tw-hidden'>
+      {% if block.settings.next_icon != blank %}
+        {{
+          block.settings.next_icon
+          | image_url: width: 48
+          | image_tag:
+            alt: 'prev',
+            class: 'tw-w-full tw-h-full tw-object-contain'
+        }}
+      {% else %}
+        {% render 'zz-prev-next-btn',
+          type: 'next',
+          color_type: block.settings.prev_next_type
+        %}
+      {% endif %}
+      
+    </span>
+    <span class='max-lg:tw-hidden'>
+      {% render 'zz-prev-next-btn', type: 'next', color_type: 'light' %}
+    </span>
+  </div>
+
+  <!-- Pagination indicator -->
+  <div class='swiper-pagination'></div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const swiperClassName = '.zz-video-swiper-preview-{{ block.id }}';
+    let isDesktop = window.innerWidth > 1023;
+    // 获取 class zz-accessories-swiper 的元素 且data-id 为 block.id 的元素
+    const zzAccessoriesSwiper = document.querySelector(swiperClassName);
+    const swiperWrapper = zzAccessoriesSwiper.querySelector('.swiper-wrapper');
+    // 获取当前 swiper-wrapper 下面 所有 第一层 div
+    const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
+    // 给每个 swiper-slide 添加 class swiper-slide
+    swiperSlides.forEach((slide) => {
+      slide.classList.add('swiper-slide');
+    });
+    let progressInterval = null;
+    let progressTimer = null;
+
+    const prevSwiper = new Swiper(swiperClassName, {
+      {% if block.settings.if_loop == true %}
+      loop: true,
+      {% endif %}
+      slidesPerView: 'auto',
+      centeredSlides: true,
+      spaceBetween: isDesktop ? 30 : 8,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+        renderBullet: function (index, className) {
+          return `
+          <span class="${className}">
+            <span class="progress-line"></span>
+          </span>`;
+        },
+      },
+      effect: 'slide',
+      on: {
+        slideChangeTransitionEnd: function () {
+          handleVideoOnSlideChange();
+        },
+        slideChangeTransitionStart: function () {
+          if (progressInterval) {
+            clearInterval(progressInterval);
+          }
+          if (progressTimer) {
+            clearTimeout(progressTimer);
+          }
+        },
+        slideChange: function () {
+          if (isDesktop) {
+            const block = document.getElementById('shopify-block-{{block.id}}');
+            block
+              .querySelectorAll('.swiper-pagination-bullet')
+              .forEach((bullet) => {
+                const progressBar = bullet.querySelector('.progress-line');
+                progressBar.style.transition = 'none';
+                progressBar.style.width = '0';
+              });
+          }
+        },
+      },
+    });
+
+    // 使用 Intersection Observer 监听 swiper-wrapper 的可见性
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            // 当 swiper-wrapper 第一次出现在视口中时执行
+            setTimeout(() => {
+              handleVideoOnSlideChange();
+            }, 200);
+            // 执行一次后取消观察
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      {
+        threshold: 0.2, // 当 20% 的元素可见时触发
+      }
+    );
+
+    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;
+    }
+    const endedHandler = function () {
+
+      if (prevSwiper.isEnd) {
+        prevSwiper.slideTo(0);
+      } else {
+        prevSwiper.slideNext();
+      }
+      if (progressInterval) {
+        clearInterval(progressInterval);
+      }
+      this.removeEventListener('ended', endedHandler);
+    };
+
+    function updataMediaProgress(type, videoDom) {
+      const block = document.getElementById('shopify-block-{{block.id}}');
+      const activeBullet = block.querySelector(
+        '.swiper-pagination-bullet-active'
+      );
+      const progressBar = activeBullet.querySelector('.progress-line');
+      if (progressBar) {
+        if (progressInterval) {
+          clearInterval(progressInterval);
+        }
+        if (progressTimer) {
+          clearTimeout(progressTimer);
+        }
+        if (type === 'video') {
+          // 添加新的事件监听器
+          if (isDesktop) {
+            progressInterval = setInterval(() => {
+              const progress = videoDom.currentTime / videoDom.duration;
+              progressBar.style.transition = '0.2s';
+              progressBar.style.width = `${progress * 100}%`;
+            }, 100);
+          }
+
+          videoDom.addEventListener('ended', endedHandler);
+        } else if (type === 'image') {
+          if (isDesktop) {
+            progressBar.style.transition = '10s linear';
+            progressBar.style.width = '100%';
+          }
+          progressTimer = setTimeout(() => {
+            if (prevSwiper.isEnd) {
+              prevSwiper.slideTo(0);
+            } else {
+              prevSwiper.slideNext();
+            }
+          }, 10000);
+        }
+      }
+    }
+
+    function handleVideoOnSlideChange() {
+      // 暂停所有视频
+      const block = document.getElementById('shopify-block-{{block.id}}');
+      const allvideo = block.querySelectorAll('video');
+      // 播放当前 active slide 中的视频
+      const activeSlide = block.querySelector('.swiper-slide-active');
+      const media = getVisibleDisplayMedias(activeSlide);
+      // 重置进度条
+      if (isDesktop) {
+        const activeBullet = block.querySelector(
+          '.swiper-pagination-bullet-active'
+        );
+        const progressBar = activeBullet.querySelector('.progress-line');
+        if (progressBar) {
+          progressBar.style.transition = 'none';
+          progressBar.style.width = '0';
+        }
+      }
+      if (media.type === 'video') {
+        allvideo.forEach((item) => {
+          if (item === media.video) {
+            media.video.currentTime = 0;
+            if (media.video.paused) {
+              media.video.play();
+            }
+
+            if('{{ block.settings.if_autoplay }}' == 'true') {
+              updataMediaProgress('video', media.video);
+            }
+          } else {
+            item.pause();
+          }
+        });
+      } else if (media.type === 'image') {
+        // 处理图片的情况
+        if('{{ block.settings.if_autoplay }}' == 'true') {
+          updataMediaProgress('image', media.image);
+        }
+        allvideo.forEach((item) => {
+          item.pause();
+        });
+      }
+    }
+  });
+</script>
+
+{% schema %}
+{
+  "name": "Video Swiper Preview",
+  "class": "zz-video-swiper-preview-block",
+  "settings": [
+    {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#ffffff",
+      "label": "背景色"
+    },
+
+    {
+      "type": "color",
+      "id": "pagination_color",
+      "default": "#ffffff",
+      "label": "轮播导航圆圈颜色"
+    },
+    {
+      "type": "color",
+      "id": "mb_pagination_color",
+      "default": "#000000",
+      "label": "移动端轮播导航圆圈颜色"
+    },
+    {
+      "type": "checkbox",
+      "id": "if_loop",
+      "label": "是否循环播放",
+      "default": false
+    },
+    {
+      "type": "checkbox",
+      "id": "if_autoplay",
+      "label": "是否自动轮播",
+      "default": false
+    },
+    {
+      "type": "checkbox",
+      "id": "has_gradient",
+      "label": "是否有左右渐变色",
+      "default": false
+    },
+    {
+      "type": "text",
+      "id": "gradient_color_left",
+      "label": "渐变色左边颜色",
+      "default": "linear-gradient(270deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
+      "visible_if": "{{ block.settings.has_gradient == true }}"
+    },
+    {
+      "type": "text",
+      "id": "gradient_color_right",
+      "label": "渐变色右边颜色",
+      "default": "linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
+      "visible_if": "{{ block.settings.has_gradient == true }}"
+    },
+    {
+      "type": "select",
+      "id": "prev_next_type",
+      "label": "prev next 颜色",
+      "options": [
+        { "value": "dark", "label": "黑色" },
+        { "value": "light", "label": "白色" },
+      ],
+      "default": "dark"
+    },
+    {
+      "type": "image_picker",
+      "id": "prev_icon",
+      "label": "轮播上一张图标 Mobile"
+    },
+    {
+      "type": "image_picker",
+      "id": "next_icon",
+      "label": "轮播下一张图标 Mobile"
+    },
+    {
+      "type": "checkbox",
+      "id": "has_title_and_content",
+      "label": "是否有标题与内容",
+      "default": true
+    }
+  ],
+  "blocks": [
+    {
+      "type": "zz-video-swiper-perview-item"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Video Swiper Preview"
+    },
+    {
+      "name": "可预览轮播图",
+      "settings": {
+        "bg_color": "#ffffff",
+        "pagination_color": "#ffffff",
+        "mb_pagination_color": "#000000",
+        "if_loop": false,
+        "if_autoplay": false,
+        "has_gradient": true,
+        "gradient_color_left": "linear-gradient(270deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
+        "gradient_color_right": "linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 40%)",
+        "prev_next_type": "dark",
+        "has_title_and_content": true
+      },
+      "blocks": [
+        {
+          "type": "zz-video-swiper-perview-item",
+          "settings": {
+            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster.png",
+            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster.png",
+            "has_title_and_content": true,
+            "heading": "Item Name",
+            "title_color": "#333232",
+            "row_content": "<p>Description set here, Description set here.</p>",
+            "content_color": "#5d544c",
+          },
+        }, 
+        {
+          "type": "zz-video-swiper-perview-item",
+          "settings": {
+            "poster_pc": "shopify://shop_images/preset_pc_swiper_video_poster_1.png",
+            "poster_mb": "shopify://shop_images/preset_mobile_swiper_video_poster_1.png",
+            "has_title_and_content": true,
+            "heading": "Item Name",
+            "title_color": "#333232",
+            "row_content": "<p>Description set here, Description set here.</p>",
+            "content_color": "#5d544c",
+          },
+        
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}