zz-shopify-components 0.3.1-beta.8 → 0.4.0

package/sections/zz-swiper-banner.liquid

@@ -0,0 +1,856 @@
+{% comment %}
+  同时支持video和img的swiper
+{% endcomment %}
+
+<style>
+  #shopify-section-{{section.id}} {
+    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
+    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
+  }
+  #shopify-section-{{section.id}} .swiper-banner-video-img p {
+    margin: 0;
+  }
+  
+
+  @media (min-width: 1024px) {
+    #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-wrapper {
+      width: 100%;
+      height: 660px !important;
+    }
+    
+  }
+  @media (min-width: 1440px) {
+    #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-wrapper {
+      width: 100%;
+      height: 760px !important;
+    }
+    
+  }
+  @media (min-width: 1536px) {
+    #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-wrapper {
+      width: 100%;
+      height: 860px !important;
+    }
+    
+  }
+
+  #shopify-section-{{section.id}} .swiper-banner-video-img {
+    margin-top: -50px;
+    width: 100%;
+    letter-spacing: 0;
+  }
+  #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullet {
+    position: relative;
+    background-color: rgba(255, 255, 255, 0.3);
+    width: 48px;
+    height: 4px;
+    border-radius: 10px;
+    opacity: 1;
+  }
+  #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullet-active {
+    width: 120px;
+    /* background-color: #fff; */
+  }
+  #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-button-next {
+    right: 20px;
+  }
+  #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-button-prev {
+    left: 20px;
+  }
+  #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-button-next,
+  #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-button-prev {
+    position: absolute;
+    display: block;
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    cursor: pointer;
+
+  }
+
+  #shopify-section-{{section.id}} .zz-swiper-banner-img-video {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover !important;
+  }
+
+  #shopify-section-{{section.id}} .swiper-button-next:after,
+  #shopify-section-{{section.id}} .swiper-button-prev:after{
+     display:none;
+  }
+
+  #shopify-section-{{section.id}}  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
+    bottom:30px;
+  }
+
+
+  #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullets .progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 4px;
+    background: #fff;
+    border-radius: 10px;
+  }
+
+
+  @media (max-width: 1024px) {
+    #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-wrapper {
+      width: 100%;
+      aspect-ratio: 375 / 576;
+    }
+    #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-button-next,
+    #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-button-prev {
+      display: none;
+    }
+    #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullet {
+      width: 24px;
+      height: 3px;
+      border-radius: 10px;
+    }
+    #shopify-section-{{section.id}} .swiper-banner-video-img .swiper-pagination-bullet-active {
+      width: 48px;
+    }
+    #shopify-section-{{section.id}} .swiper-horizontal>.swiper-pagination-bullets .progress-bar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: 3px;
+      background: #fff;
+    }
+  }
+</style>
+{% schema %}
+{
+  "name": "Swiper Banner V3",
+  "settings": [
+    {
+      "type": "range",
+      "id": "padding_top",
+      "min": 0,
+      "max": 100,
+      "step": 4,
+      "unit": "px",
+      "label": "t:sections.all.padding.padding_top",
+      "default": 0
+    },
+    {
+      "type": "range",
+      "id": "padding_bottom",
+      "min": 0,
+      "max": 100,
+      "step": 4,
+      "unit": "px",
+      "label": "t:sections.all.padding.padding_bottom",
+      "default": 0
+    }
+  ],
+  "blocks": [
+    {
+      "name": "BannerImg",
+      "type": "img",
+      "settings": [
+        {
+          "type": "select",
+          "id": "theme",
+          "label": "Header 主题变化",
+          "info": "当前banner对应的header主题变化",
+          "options": [
+            {
+              "value": "dark",
+              "label": "Dark"
+            },
+            {
+              "value": "light",
+              "label": "Light"
+            }
+          ]
+        },
+        {
+          "type": "textarea",
+          "id": "linksbanner",
+          "label": "Sites Link Map banner",
+          "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ "
+        },
+        {
+          "type": "select",
+          "id": "desc_text_type",
+          "label": "描述文字类型",
+          "options": [
+           
+            {
+              "value": "text",
+              "label": "文字，需要填写大小标题"
+            },
+            {
+              "value": "image",
+              "label": "图片，需要传标题图片"
+            },
+          ],
+          "default": "text"
+        },
+        {
+          "type": "richtext",
+          "id": "title",
+          "label": "大标题",
+          "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
+        },
+        {
+          "type": "richtext",
+          "id": "title_mb",
+          "label": "大标题 Mobile",
+          "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
+        },
+        {
+          "type": "richtext",
+          "id": "subtitle",
+          "label": "小标题",
+          "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
+        },
+        {
+          "type": "richtext",
+          "id": "subtitle_mb",
+          "label": "小标题 Mobile",
+          "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
+        },
+        {
+          "type": "color",
+          "id": "color",
+          "label": "Text Color",
+          "info": "文本颜色",
+          "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
+        },
+        {
+          "type": "image_picker",
+          "id": "banner_desc",
+          "label": "Banner上悬浮标题图",
+          "visible_if": "{{ block.settings.desc_text_type == 'image' }}"
+        },
+        {
+          "type": "image_picker",
+          "id": "banner_desc_mb",
+          "label": "Banner上悬浮标题图 Mobile",
+          "visible_if": "{{ block.settings.desc_text_type == 'image' }}"
+        },
+    
+        {
+          "type": "number",
+          "id": "top_mb",
+          "default": 90,
+          "label": "移动端顶部距离",
+          "info": "移动端文案距离顶部距离 单位PX"
+        },
+        {
+          "type": "image_picker",
+          "id": "banner",
+          "label": "Banner PC"
+        },
+        {
+          "type": "image_picker",
+          "id": "banner_mb",
+          "label": "Banner Mobile"
+        },
+        {
+          "type": "text",
+          "id": "btn_text",
+          "label": "按钮文字",
+          "default": "learn more"
+        },
+        {
+          "type": "select",
+          "id": "function_type",
+          "label": "功能类型",
+          "options": [
+            {
+              "value": "link",
+              "label": "链接"
+            },
+            {
+              "value": "link_map",
+              "label": "多国家映射"
+            },
+          ],
+          "default": "link"
+        },
+        {
+          "type": "textarea",
+          "id": "links",
+          "label": "Sites Link Map",
+          "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ ",
+          "visible_if": "{{ block.settings.function_type == 'link_map' }}"
+        },
+        {
+          "type": "url",
+          "id": "link",
+          "label": "Normal Button Link",
+          "info": "普通按钮跳转地址",
+          "visible_if": "{{ block.settings.function_type == 'link' }}"
+        },
+        {
+          "type": "color",
+          "id": "btn_border_color",
+          "label": "Button Border Color",
+          "info": "按钮的边框颜色"
+        },
+        {
+          "type": "color",
+          "id": "btn_background_color",
+          "label": "Button Background Color",
+          "info": "按钮的背景颜色"
+        },
+        {
+          "type": "color",
+          "id": "btn_color",
+          "label": "Button Text Color",
+          "info": "按钮的文本颜色"
+        }
+      ]
+    },
+    {
+      "name": "BannerVideo",
+      "type": "video",
+      "settings": [
+        {
+          "type": "select",
+          "id": "theme",
+          "label": "Header 主题变化",
+          "info": "当前banner对应的header主题变化",
+          "options": [
+            {
+              "value": "dark",
+              "label": "Dark"
+            },
+            {
+              "value": "light",
+              "label": "Light"
+            }
+          ]
+        },
+        {
+          "type": "textarea",
+          "id": "linksbanner",
+          "label": "Sites Link Map banner",
+          "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ "
+        },
+        {
+          "type": "select",
+          "id": "desc_text_type",
+          "label": "描述文字类型",
+          "options": [
+           
+            {
+              "value": "text",
+              "label": "文字，需要填写大小标题"
+            },
+            {
+              "value": "image",
+              "label": "图片，需要传标题图片"
+            },
+          ],
+          "default": "text"
+        },
+        {
+          "type": "richtext",
+          "id": "title",
+          "label": "大标题",
+          "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
+        },
+        {
+          "type": "richtext",
+          "id": "title_mb",
+          "label": "大标题 Mobile",
+          "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
+        },
+        {
+          "type": "richtext",
+          "id": "subtitle",
+          "label": "小标题",
+          "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
+        },
+        {
+          "type": "richtext",
+          "id": "subtitle_mb",
+          "label": "小标题 Mobile",
+          "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
+        },
+        {
+          "type": "color",
+          "id": "color",
+          "label": "Text Color",
+          "info": "文本颜色",
+          "visible_if": "{{ block.settings.desc_text_type == 'text' }}"
+        },
+        {
+          "type": "image_picker",
+          "id": "banner_desc",
+          "label": "Banner上悬浮标题图",
+          "visible_if": "{{ block.settings.desc_text_type == 'image' }}"
+        },
+        {
+          "type": "image_picker",
+          "id": "banner_desc_mb",
+          "label": "Banner上悬浮标题图 Mobile",
+          "visible_if": "{{ block.settings.desc_text_type == 'image' }}"
+        },
+    
+        {
+          "type": "number",
+          "id": "top_mb",
+          "default": 90,
+          "label": "移动端顶部距离",
+          "info": "移动端文案距离顶部距离 单位PX"
+        },
+        {
+          "type": "video",
+          "id": "video_pc",
+          "label": "video_pc",
+          "info": "pc端的视频"
+        },
+        {
+          "type": "text",
+          "id": "video_pc_url",
+          "label": "video_pc_url",
+          "info": "pc段的视频链接"
+        },
+        {
+          "type": "image_picker",
+          "id": "posterPc",
+          "label": "poster Pc"
+        },
+        {
+          "type": "video",
+          "id": "video_mobile",
+          "label": "video_mobile",
+          "info": "mobile端的视频"
+        },
+        {
+          "type": "text",
+          "id": "video_mobile_url",
+          "label": "video_mobile_url",
+          "info": "mobile端的视频链接"
+        },
+        {
+          "type": "image_picker",
+          "id": "posterMb",
+          "label": "poster Mb"
+        },
+        {
+          "type": "text",
+          "id": "btn_text",
+          "label": "按钮文字",
+          "default": "learn more"
+        },
+        {
+          "type": "select",
+          "id": "function_type",
+          "label": "功能类型",
+          "options": [
+            {
+              "value": "link",
+              "label": "链接"
+            },
+            {
+              "value": "link_map",
+              "label": "多国家映射"
+            },
+          ],
+          "default": "link"
+        },
+        {
+          "type": "textarea",
+          "id": "links",
+          "label": "Sites Link Map",
+          "info": "国家对应链接的表,国家即是国家选择器上显示的字段，国家和路由之间用冒号隔开（ 冒号后要加空格)。国家之间换行，“default”为其他未写的默认的链接                    EG: Canada: https://hoverair.com/   default: https://hoverair.com/ ",
+          "visible_if": "{{ block.settings.function_type == 'link_map' }}"
+        },
+        {
+          "type": "url",
+          "id": "link",
+          "label": "Normal Button Link",
+          "info": "普通按钮跳转地址",
+          "visible_if": "{{ block.settings.function_type == 'link' }}"
+        },
+        {
+          "type": "color",
+          "id": "btn_border_color",
+          "label": "Button Border Color",
+          "info": "按钮的边框颜色"
+        },
+        {
+          "type": "color",
+          "id": "btn_background_color",
+          "label": "Button Background Color",
+          "info": "按钮的背景颜色"
+        },
+        {
+          "type": "color",
+          "id": "btn_color",
+          "label": "Button Text Color",
+          "info": "按钮的文本颜色"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Swiper Banner V3"
+    }
+  ]
+}
+{% endschema %}
+
+
+  <div class='swiper swiper-banner-video-img'>
+    <div class='swiper-wrapper'>
+      {% for banner in section.blocks %}
+        <div
+          class='swiper-slide tw-h-full'
+          data-header-theme='{{ banner.settings.theme }}'
+        >
+          <div
+            id='{{ banner.id }}-bannerlink'
+            class='swiper-content tw-w-full tw-max-w-screen tw-relative tw-text-left tw-h-full'
+          >
+            {%- if banner.type == 'img' -%}
+              {% render 'zz-img',
+                pc_image: banner.settings.banner,
+                mb_image: banner.settings.banner_mb,
+                image_alt: banner.settings.title | escape,
+                class_name: "zz-swiper-banner-img-video",
+            %}
+ 
+            {%- elsif banner.type == 'video' -%}
+              {% if banner.settings.video_pc_url != blank %}
+                {% assign pc_video = banner.settings.video_pc_url %}
+              {% else %}
+                {% assign pc_video = banner.settings.video_pc %}
+              {% endif %}
+              {% if banner.settings.video_mobile_url != blank %}
+                {% assign mb_video = banner.settings.video_mobile_url %}
+              {% else %}
+                {% assign mb_video = banner.settings.video_mobile %}
+              {% endif %}
+              {% render 'zz-video',
+                pc_video: pc_video,
+                pc_poster: banner.settings.posterPc,
+                mb_video: mb_video,
+                mb_poster: banner.settings.posterMb,
+                class: 'zz-swiper-banner-img-video',
+                autoplay: true,
+                loop: true,
+                muted: true
+              %}
+            {% endif %}
+            <div
+              class='tw-absolute lg:tw-left-[50%] lg:tw-top-[50%] lg:tw-translate-x-[-50%] lg:tw-translate-y-[-50%] lg:tw-w-[85vw] xl:tw-w-[1220px] tw-z-10  max-lg:tw-h-full max-lg:tw-top-0 max-lg:tw-left-0 max-lg:tw-w-full max-lg:tw-pt-[90px] tw-box-border max-lg:tw-flex max-lg:tw-flex-col max-lg:tw-items-center'
+            >
+              <div class='swiper-content-text lg:tw-w-[640px]'>
+                {%- if banner.settings.desc_text_type == 'text' -%}
+                <div
+                  class='lg:tw-hidden tw-p-0 tw-leading-[58px] tw-text-[48px] tw-font-bold tw-mb-[24px] max-lg:tw-my-[8px] max-lg:tw-text-[24px] max-lg:tw-leading-[1.2] max-lg:tw-text-center'
+                    style='color: {{ banner.settings.color | default: 'white' }};'
+                >
+                  {{ banner.settings.title_mb }}
+                </div>
+                <div
+                  class='max-lg:tw-hidden tw-p-0 tw-leading-[58px] tw-text-[48px] tw-font-bold tw-mb-[24px] max-lg:tw-my-[8px] max-lg:tw-text-[24px] max-lg:tw-leading-[1.2] max-lg:tw-text-center'
+                    style='color: {{ banner.settings.color | default: 'white' }};'
+                >
+                  {{ banner.settings.title }}
+                </div>
+                <div
+                  class='lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5] tw-text-[28px] tw-font-medium max-lg:tw-text-[14px] max-lg:tw-text-center'
+                    style='color: {{ banner.settings.color | default: 'white' }}'
+                >
+                  {{ banner.settings.subtitle_mb }}
+                </div>
+                <div
+                  class='max-lg:tw-hidden tw-p-0 tw-m-0 tw-leading-[1.5] tw-text-[28px] tw-font-medium max-lg:tw-text-[14px] max-lg:tw-text-center'
+                    style='color: {{ banner.settings.color | default: 'white' }}'
+                >
+                  {{ banner.settings.subtitle }}
+                </div>
+                {%- elsif banner.settings.desc_text_type == 'image' -%}
+                  <div 
+                    class="max-lg:tw-hidden tw-w-[640px]">
+                    {{
+                      banner.settings.banner_desc
+                      | image_url: width: 1280
+                      | image_tag:
+                        alt: banner.settings.title,
+                        class: 'tw-w-full tw-h-auto',
+                        format: 'webp',
+                        preload: true,
+                        fetchpriority:"high"
+                    }}
+                    
+                  </div>
+                  <div 
+                    class="lg:tw-hidden tw-max-w-[480px]">
+                    {{
+                      banner.settings.banner_desc_mb
+                      | image_url: width: 670
+                      | image_tag:
+                        alt: banner.settings.title,
+                        class: 'tw-w-full tw-h-auto',
+                        format: 'webp',
+                        preload: true,
+                        fetchpriority:"high"
+                    }}
+                  </div>
+                {% endif %}
+
+                
+                <div
+                  class='buttons max-lg:tw-absolute max-lg:tw-bottom-[60px] max-lg:tw-left-[0] max-lg:tw-right-[0] lg:tw-mt-[48px]'
+                >
+                  {%- if banner.settings.function_type == 'link' -%}
+                    <a
+                      href='{{ banner.settings.link  }}'
+                      class='tw-w-fit tw-block tw-no-underline tw-h-[48px] max-lg:tw-px-[20px] lg:tw-px-[24px] max-lg:tw-h-[36px] tw-leading-[48px] max-lg:tw-leading-[36px] tw-text-center tw-rounded-full tw-text-[16px] max-lg:tw-text-[13px] max-lg:tw-mx-auto tw-cursor-pointer'
+                      style='color: {{ banner.settings.btn_color | default: 'black' }}; border: 1px solid {{ banner.settings.btn_border_color | default: 'white' }}; background: {{ banner.settings.btn_background_color | default: 'white' }}'
+                    >
+                      {{- banner.settings.btn_text -}}
+                    </a>
+
+                  {%- elsif banner.settings.function_type == 'link_map' -%}
+                    <div
+                      id='{{ banner.id }}-site-btn'
+                      class='tw-w-fit tw-h-[48px] max-lg:tw-px-[20px] lg:tw-px-[24px] max-lg:tw-h-[36px] tw-leading-[48px] max-lg:tw-leading-[36px] tw-text-center tw-rounded-full tw-text-[16px] max-lg:tw-text-[13px] max-lg:tw-mx-auto tw-cursor-pointer'
+                      style='color: {{ banner.settings.btn_color | default: 'black' }}; border: 1px solid {{ banner.settings.btn_border_color | default: 'white' }}; background: {{ banner.settings.btn_background_color | default: 'white' }}'
+                    >
+                      {{- banner.settings.btn_text -}}
+                    </div>
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+          </div>
+          <script>
+            document.addEventListener('DOMContentLoaded', (event) => {
+              if(document.getElementById('{{ banner.id }}-site-btn')) {
+                bindSiteJump(document.getElementById('{{ banner.id }}-site-btn'), {{ banner.settings.links | json }})
+              }
+              bindSiteJump(document.getElementById('{{ banner.id }}-bannerlink'), {{ banner.settings.linksbanner | json }})
+            })
+          </script>
+        </div>
+      {% endfor %}
+    </div>
+
+    <!-- If we need navigation buttons -->
+    <div class='swiper-button-prev'>
+      {% render 'zz-prev-next-blur-icon', type: 'prev', color_type: 'light' %}
+    </div>
+    <div class='swiper-button-next'>
+      {% render 'zz-prev-next-blur-icon', type: 'next', color_type: 'light' %}
+    </div>
+
+    <!-- Pagination indicator -->
+    <div class='swiper-pagination'></div>
+  </div>
+
+<script src='{{ 'site-jump.js' | asset_url }}' defer='defer'></script>
+
+<script>
+  document.addEventListener('DOMContentLoaded', (event) => {
+    const VIDEO_IMG_SWIPER = new Swiper('#shopify-section-{{section.id}} .swiper-banner-video-img', {
+      loop: true,
+      spaceBetween: 0,
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+        enabled: {% if section.blocks.size > 1 %} true {% else %} false {% endif %}
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+        renderBullet: function (index, className) {
+          return `
+            <span class="${className}">
+              <span class="progress-bar"></span>
+            </span>`;
+        },
+      },
+      effect: 'slide',
+       on: {
+          afterInit: function () {
+            const section = document.getElementById('shopify-section-{{section.id}}')
+            const allvideo =section.querySelectorAll('video')
+            allvideo.forEach((item)=>{
+                item.addEventListener('ended', () => {
+                    // 在这里可以放置你希望在视频播放结束后执行的代码
+                    setTimeout(() => {
+                      VIDEO_IMG_SWIPER.slideNext();
+                    }, 500);
+                  })
+            })
+          },
+          slideChange: function () {
+            const theme = this.slides[this.activeIndex].getAttribute('data-header-theme')
+            if(theme) {
+              document.querySelector('header-control').setBannerTheme(theme)
+            }
+          }
+        }
+    });
+
+  var timerSwiper = null;
+  let progressInterval = null
+
+  function resetProgress() {
+    clearInterval(progressInterval)
+    document.querySelectorAll(".swiper-banner-video-img .swiper-pagination-bullet").forEach((bullet) => {
+      const progressBar = bullet.querySelector(".progress-bar");
+      bullet.style.transition = "0.3s";
+      progressBar.style.transition = "none";
+      progressBar.style.width = "0"; 
+    });
+  }
+
+    // 判断active dom 是img还是video
+    function activeType() {
+      var judgeDom = document
+        .getElementsByClassName('swiper-banner-video-img')[0]
+        .getElementsByClassName('swiper-wrapper')[0]
+        .getElementsByClassName('swiper-slide-active')[0]
+        .getElementsByClassName('zz-swiper-banner-img-video')[0];
+      if (judgeDom.tagName.toLowerCase() === 'video') {
+        judgeVideoOrImg = 'video';
+        return 'video';
+      }
+      if (judgeDom.tagName.toLowerCase() === 'img') {
+        judgeVideoOrImg = 'img';
+        return 'img';
+      }
+    }
+
+    {% comment %} 获取当前active的dom的type {% endcomment %}
+    var judgeVideoOrImg = activeType();
+      // debugger
+    console.log('judgeVideoOrImg1',judgeVideoOrImg)
+
+    {% comment %} 当为video的时候 {% endcomment %}
+    if(judgeVideoOrImg==='video'){
+
+      playit();
+    }
+      {% comment %} 当为img的时候 {% endcomment %}
+    if(judgeVideoOrImg==='img'){
+      // console.log('wo shi tup ')
+       if(timerSwiper){
+        // timerSwiper=null
+        clearTimeout(timerSwiper);
+      }
+      updataMediaProgress('img')
+      timerSwiper = setTimeout(function() {
+          VIDEO_IMG_SWIPER.slideNext();
+      }, 5000);
+    } 
+
+
+    function updataMediaProgress(type, videoDom) {
+      const activeBullet = document.querySelector(".swiper-banner-video-img .swiper-pagination-bullet-active");
+      const progressBar = activeBullet.querySelector(".progress-bar");
+      if (progressBar) {
+        let progress = 0
+        if(progressInterval) clearInterval(progressInterval)
+        progressInterval = setInterval(() => {
+          if(progress >= 1) {
+            clearInterval(progressInterval)
+            progress = 1
+          } else {
+            if(type === 'img') {
+              progress = 100 / 4800 + progress
+            } else {
+              progress = videoDom.currentTime / videoDom.duration
+            }
+          }
+          progressBar.style.transition = "0.2s";
+          progressBar.style.width = `${(progress) * 100}%`; 
+        }, 100);
+      }
+    }
+
+    // function updataVideoProgress(videoDom) {
+    //   const activeBullet = document.querySelector(".swiper-banner-video-img .swiper-pagination-bullet-active");
+    //   const progressBar = activeBullet.querySelector(".progress-bar");
+    //   if (progressBar) {
+    //     let progress = 0
+    //     if(progressInterval) clearInterval(progressInterval)
+    //     progressInterval = setInterval(() => {
+    //       if(progress >= 1) {
+    //         clearInterval(progressInterval)
+    //         progress = 1
+    //       } else {
+    //       }
+    //       progressBar.style.transition = "0.25s";
+    //       progressBar.style.width = `${(progress) * 100}%`; 
+    //     }, 200);
+    //   }
+    // }
+
+  {% comment %} 下一个滑块之后判断类型 {% endcomment %}
+   VIDEO_IMG_SWIPER.on('slideChangeTransitionEnd ', function () {
+        // console.log('slideChangeTransitionEnd');
+      judgeVideoOrImg = activeType();
+     if(judgeVideoOrImg==='video'){
+        playit();
+
+     }
+     if(judgeVideoOrImg==='img'){
+        if(timerSwiper){
+        // timerSwiper=null
+          clearTimeout(timerSwiper);
+        }
+         timerSwiper = setTimeout(function() {
+            VIDEO_IMG_SWIPER.slideNext();
+        }, 5000);
+        updataMediaProgress('img')
+     }
+  })
+  {% comment %} 暂停所有的video的播放 {% endcomment %}
+  VIDEO_IMG_SWIPER.on('slideChange ', function () {
+    resetProgress()
+    clearTimeout(timerSwiper);
+    endallvideo()
+  });
+
+
+
+
+  {% comment %} 监听当前active video完成 {% endcomment %}
+    function playit() {
+      // debugger
+      // 获取当前激活的slide 的index
+      let activeIndex = VIDEO_IMG_SWIPER.activeIndex;
+      let active_video = Array.from(
+        document
+          .getElementsByClassName('swiper-banner-video-img')[0]
+          .getElementsByClassName('swiper-wrapper')[0]
+          .getElementsByClassName('swiper-slide-active')[0]
+          .getElementsByTagName('video')
+      ).find(video => getComputedStyle(video).display !== 'none');
+
+      active_video.play()
+          updataMediaProgress('video', active_video)
+         
+    }
+
+    //将所有的video暂停,然后播放下一个
+    function endallvideo() {
+      let videoALL = document
+        .getElementsByClassName('swiper-banner-video-img')[0]
+        .getElementsByClassName('swiper-wrapper')[0]
+        .getElementsByClassName('swiper-slide');
+      for (var i = 0; i < videoALL.length; i++) {
+        // console.log('videoALL[i]', videoALL[i]);
+        if(videoALL[i].getElementsByTagName('video')[0]){
+           videoALL[i].getElementsByTagName('video')[0].currentTime = 0;
+        }
+      }
+    }
+  })
+</script>