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

package/blocks/zz-video-img-list.liquid

@@ -1,166 +1,166 @@
-{% assign block_size = block.blocks.size %}
-
-
-
-<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-img-list-swiper {
-    width: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
-    height: fit-content;
-    position: relative;
-    letter-spacing: 0;
-  }
- 
-  
-  #shopify-block-{{block.id}} .swiper-button-next:after,
-  #shopify-block-{{block.id}} .swiper-button-prev:after {
-    display: none;
-  }
-
-  @media screen and (max-width: 750px) {
-    #shopify-block-{{block.id}} .swiper-button-next,
-    #shopify-block-{{block.id}} .swiper-button-prev {
-      display: none;
-    }
-  }
-  @media screen and (min-width: 750px) {
-   
-    
-    #shopify-block-{{block.id}} .swiper-button-next,
-    #shopify-block-{{block.id}} .swiper-button-prev {
-      width: 48px;
-      height: 48px;
-    }
-    #shopify-block-{{block.id}} .swiper-button-prev {
-      left: 20px;
-      top: 50%;
-      right: unset;
-      transform:translateY(-50%);
-    }
-    #shopify-block-{{block.id}} .swiper-button-next {
-      right: 20px;
-      left: unset;
-      top: 50%;
-      transform:translateY(-50%);
-    }
-    #shopify-block-{{block.id}} .swiper-button-next.swiper-button-disabled, #shopify-block-{{block.id}} .swiper-button-prev.swiper-button-disabled {
-      display: none;
-    }
-  
-  }
-
-</style>
-
-
- 
-  <div 
-    class='zz-video-img-list-swiper zz-video-img-list-swiper-{{ block.id }}'
-  >
-    <div class='zz-swiper-wrapper swiper-wrapper'>
-      {% content_for 'blocks' %}
-    </div>
-
-    <!-- If we need navigation buttons -->
-    <div class='swiper-button-prev {% if block_size <= 3 %} tw-hidden {% endif %} max-md:tw-hidden'>
-
-        {% render 'zz-prev-next-blur-icon', type: 'prev', color_type: block.settings.prev_next_type %}
-    </div>
-    <div class='swiper-button-next {% if block_size <= 3 %} tw-hidden {% endif %} max-md:tw-hidden'>
-      {% render 'zz-prev-next-blur-icon', type: 'next', color_type: block.settings.prev_next_type %}
-    </div>
-
-  </div>
-
-<script>
-  
-  document.addEventListener('DOMContentLoaded', function () {
-    const videoNum = {{ block_size }};
-    const block = document.getElementById(
-      'shopify-block-{{block.id}}'
-    );
-    let isDesktop = window.innerWidth > 750;
-    const swiperWrapper = block.querySelector('.zz-swiper-wrapper');
-    // 获取当前 swiper-wrapper 下面 所有 第一层 div 
-    const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
-    // 给每个 swiper-slide 添加 class swiper-slide
-    swiperSlides.forEach(slide => {
-      slide.classList.add('swiper-slide');
-    });
-
-    const prevIcon = block.querySelector('.swiper-button-prev');
-    const nextIcon = block.querySelector('.swiper-button-next');
-
-    let progressTimer = null;
-    const swiperClassName = '.zz-video-img-list-swiper-{{ block.id }}';
-    const videoImgListSwiper = new Swiper(swiperClassName, {
-      slidesPerView: "auto",
-      initialSlide: isDesktop ? 1 : 0,
-      centeredSlides: true,
-      spaceBetween: isDesktop ? 24 : 8,
-      navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-      },
-      effect: 'slide',
-      freeMode: isDesktop ? false : true,
-      on: {
-        slideChangeTransitionEnd: function (e) {
-           console.log('slideChangeTransitionEnd', e.activeIndex);
-           {% comment %} if (e.activeIndex < 1) {
-            videoImgListSwiper.slideTo(videoNum - 1, 0);
-           } else if(e.activeIndex > videoNum - 1) {
-            videoImgListSwiper.slideTo(0, 0);
-           } else {
-
-           } {% endcomment %}
-
-        },
-      }
-    });
-  });
-</script>
-
-{% schema %}
-{
-  "name": "Full Screen Swiper",
-  "class": "zz-video-img-list-swiper-block",
-  "settings": [
-    {
-      "type": "color",
-      "id": "bg_color",
-      "default": "#000000",
-      "label": "背景色"
-    },
-   
-    {
-      "type": "select",
-      "id": "prev_next_type",
-      "label": "prev next 颜色",
-      "options": [
-        { "value": "dark", "label": "黑色" },
-        { "value": "light", "label": "白色" },
-      ],
-      "default": "light"
-    },
-  ],
-  "blocks": [
-    {
-      "type": "zz-video-img-item",
-    }
-  ],
-  "presets": [
-    {
-      "name": "ZZ Video Img List",
-    },
-  ]
-}
-{% endschema %}
+{% assign block_size = block.blocks.size %}
+
+
+
+<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-img-list-swiper {
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: fit-content;
+    position: relative;
+    letter-spacing: 0;
+  }
+ 
+  
+  #shopify-block-{{block.id}} .swiper-button-next:after,
+  #shopify-block-{{block.id}} .swiper-button-prev:after {
+    display: none;
+  }
+
+  @media screen and (max-width: 750px) {
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      display: none;
+    }
+  }
+  @media screen and (min-width: 750px) {
+   
+    
+    #shopify-block-{{block.id}} .swiper-button-next,
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      width: 48px;
+      height: 48px;
+    }
+    #shopify-block-{{block.id}} .swiper-button-prev {
+      left: 20px;
+      top: 50%;
+      right: unset;
+      transform:translateY(-50%);
+    }
+    #shopify-block-{{block.id}} .swiper-button-next {
+      right: 20px;
+      left: unset;
+      top: 50%;
+      transform:translateY(-50%);
+    }
+    #shopify-block-{{block.id}} .swiper-button-next.swiper-button-disabled, #shopify-block-{{block.id}} .swiper-button-prev.swiper-button-disabled {
+      display: none;
+    }
+  
+  }
+
+</style>
+
+
+ 
+  <div 
+    class='zz-video-img-list-swiper zz-video-img-list-swiper-{{ block.id }}'
+  >
+    <div class='zz-swiper-wrapper swiper-wrapper'>
+      {% content_for 'blocks' %}
+    </div>
+
+    <!-- If we need navigation buttons -->
+    <div class='swiper-button-prev {% if block_size <= 3 %} tw-hidden {% endif %} max-md:tw-hidden'>
+
+        {% render 'zz-prev-next-blur-icon', type: 'prev', color_type: block.settings.prev_next_type %}
+    </div>
+    <div class='swiper-button-next {% if block_size <= 3 %} tw-hidden {% endif %} max-md:tw-hidden'>
+      {% render 'zz-prev-next-blur-icon', type: 'next', color_type: block.settings.prev_next_type %}
+    </div>
+
+  </div>
+
+<script>
+  
+  document.addEventListener('DOMContentLoaded', function () {
+    const videoNum = {{ block_size }};
+    const block = document.getElementById(
+      'shopify-block-{{block.id}}'
+    );
+    let isDesktop = window.innerWidth > 750;
+    const swiperWrapper = block.querySelector('.zz-swiper-wrapper');
+    // 获取当前 swiper-wrapper 下面 所有 第一层 div 
+    const swiperSlides = swiperWrapper.querySelectorAll(':scope > div');
+    // 给每个 swiper-slide 添加 class swiper-slide
+    swiperSlides.forEach(slide => {
+      slide.classList.add('swiper-slide');
+    });
+
+    const prevIcon = block.querySelector('.swiper-button-prev');
+    const nextIcon = block.querySelector('.swiper-button-next');
+
+    let progressTimer = null;
+    const swiperClassName = '.zz-video-img-list-swiper-{{ block.id }}';
+    const videoImgListSwiper = new Swiper(swiperClassName, {
+      slidesPerView: "auto",
+      initialSlide: isDesktop ? 1 : 0,
+      centeredSlides: true,
+      spaceBetween: isDesktop ? 24 : 8,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      effect: 'slide',
+      freeMode: isDesktop ? false : true,
+      on: {
+        slideChangeTransitionEnd: function (e) {
+           console.log('slideChangeTransitionEnd', e.activeIndex);
+           {% comment %} if (e.activeIndex < 1) {
+            videoImgListSwiper.slideTo(videoNum - 1, 0);
+           } else if(e.activeIndex > videoNum - 1) {
+            videoImgListSwiper.slideTo(0, 0);
+           } else {
+
+           } {% endcomment %}
+
+        },
+      }
+    });
+  });
+</script>
+
+{% schema %}
+{
+  "name": "Full Screen Swiper",
+  "class": "zz-video-img-list-swiper-block",
+  "settings": [
+    {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#000000",
+      "label": "背景色"
+    },
+   
+    {
+      "type": "select",
+      "id": "prev_next_type",
+      "label": "prev next 颜色",
+      "options": [
+        { "value": "dark", "label": "黑色" },
+        { "value": "light", "label": "白色" },
+      ],
+      "default": "light"
+    },
+  ],
+  "blocks": [
+    {
+      "type": "zz-video-img-item",
+    }
+  ],
+  "presets": [
+    {
+      "name": "ZZ Video Img List",
+    },
+  ]
+}
+{% endschema %}