liquidt语法的轮播

{{ 'swiper.css' | asset_url | stylesheet_tag }}
{{ 'swiper.js' | asset_url | script_tag }}
{{ 'jquery.min.js' | asset_url | script_tag }}
<style type="text/css">
  		* {
  			margin: 0;
  			padding: 0;
  		}

  		#case4 p {
  			text-align: center;
  			color: red;
  			opacity: 0.5;
  		}

  		#case4 li {
  			list-style: none;
  			font-family: Century Gothic Std, arial, sans-serif;
  			display: flex;
  			flex: 0 0 auto;
  			font-size: {{section.settings.font-size}}px;
  			padding: 0 0 0 1rem;
  		}

  		.swiper-container {
  			width: 100%;
  			height: 10.125rem;
  			margin: 0 auto;
  		}

  		.swiper-container-free-mode>.swiper-wrapper {
  			transition-timing-function: linear;
  		}

  		.marquee-container {
  			display: flex;
  			flex-direction: row;
  			align-items: center;
  		}

  		.marquee {
  			display: flex;
  			flex-direction: row;
  			height: 10.125rem;
          padding:0 0 0 2rem;
  		}

  		.marquee a {
  			text-decoration: none;
  			color: #000000;

  		}
  a:hover{
  			text-decoration:underline
  		}
  		.marquee-icon {
  			display: flex;
  			align-items: center;
            justify-content: space-between;
  		}

  		.marquee-content {
  			display: flex;
  			align-items: center;
  		}

  		.swiper-slide {
  			padding: 0 0 0 3rem;
          width:max-content!important;
  		}

  		.playicon {
  			display: flex;
  			align-items: center;
  			justify-content: center;

  		}

  		.playicon::before {
  			content: url('data:image/svg+xml;utf8,<svg class="palysvg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 0H0v20h20V0z"></path><path d="M4.5 2.64v14.72l13-7.36-13-7.36zm1 1.72l10 5.64-10 5.64V4.36z" fill="currentColor"></path></svg>');
  			background: url();
  			opacity: 0;
  		}

  		.playicon::after {
  			content: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 0H0v20h20V0z"></path><path d="M7.25 16.05a.55.55 0 01-.55-.55v-11a.55.55 0 111.1 0v11a.55.55 0 01-.55.55zM12.71 16.05a.55.55 0 01-.55-.55v-11a.55.55 0 011.1.05v11a.55.55 0 01-.55.5z" fill="currentColor"></path></svg>');
  			opacity: 1;
  		}

  		.toggleIcon .playicon::before {
  			content: url('data:image/svg+xml;utf8,<svg class="palysvg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 0H0v20h20V0z"></path><path d="M4.5 2.64v14.72l13-7.36-13-7.36zm1 1.72l10 5.64-10 5.64V4.36z" fill="currentColor"></path></svg>');
  			opacity: 1;
  		}

  		.toggleIcon .playicon::after {
  			content: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 0H0v20h20V0z"></path><path d="M7.25 16.05a.55.55 0 01-.55-.55v-11a.55.55 0 111.1 0v11a.55.55 0 01-.55.55zM12.71 16.05a.55.55 0 01-.55-.55v-11a.55.55 0 011.1.05v11a.55.55 0 01-.55.5z" fill="currentColor"></path></svg>');
  			opacity: 0;
  		}
       .playbtn{
             background-color: #ffffff
       }
  .playbtn:hover{
             background-color: #ffffff
       }
</style>
<div class="marquee-container">
  <button class="playbtn">
    <span class="playicon"> </span>
  </button>
  <div class="swiper-container" id="case4">
    <div class="swiper-wrapper">
      {%- for i in (1..5) -%}
        <div class="swiper-slide" style="width：600px!important;">
          <ul class="marquee">
            <li>
              <span class="marquee-icon">
                <font style="vertical-align: inherit;">
                  <font style="vertical-align: inherit;font-weight: 700;">{{section.settings.marquee-title}}</font>
                </font>
              </span>
            </li>
              {%- for block in section.blocks -%}
            <li>
              <!-- icon -->
              <span class="marquee-icon">
              {{block.settings.marquee-icon}}
              </span>
              <!-- 文字的内容 -->
              <a href="{{ block.settings.marquee-url}}" aria-label="{{block.settings.marquee-content}}" target="_self" class="marquee-content">
                <span>
                  <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">{{block.settings.marquee-content}}</font>
                  </font>
                </span>
              </a>
            </li>
            {%- endfor -%}
          </ul>
        </div>
        {%- endfor - %}
    </div>
  </div>
</div>
<script type="text/javascript">
  $(function () {
  	var swiper = new Swiper('#case4', {
  		loop: true,       //允许从第一张到最后一张，或者从最后一张到第一张  循环属性
  		slidesPerView: 1,   // 设置显示三张
       spaceBetween: 10,
  		//centeredSlides : true,     //使当前图片居中显示
  		freeMode: true,        // 使幻灯片滑动时不止滑动一格，且不会自动贴合
  		slidesPerGroup: 1,   //定义1张图片为一组
  		speed: {{section.settings.speed-time}},//设置过度时间
  		grabCursor: true,//鼠标样式根据浏览器不同而定
  		autoplay: {
  			delay: 1,
  			disableOnInteraction: false,
  		},                 /*  设置每隔3000毫秒切换 */
       breakpoints: {
      // when window width is >= 768px
    768: {
      slidesPerView:{{section.settings.speedNUM}},
      spaceBetween: 40
    }
         
  }
  	});
  	/* 鼠标悬停 停止动画 */
  	var playIcon = document.querySelector('.playicon')
  	playIcon.addEventListener('click', function () {
  		var btn = playIcon.parentElement;
  		if (btn.classList.contains("toggleIcon")) {
  			swiper.autoplay.start();
  			btn.classList.remove('toggleIcon');
  		} else {
  			swiper.autoplay.stop();
  			btn.classList.add('toggleIcon');
  		}

  	})

  });
</script>
{% schema %}
  {
    "name": "marquee",
    "settings": [
        {
     "type": "text",
     "id": "marquee-title",
     "label": "Heading",
      "default": "尊享服务"
     },
      {
  "type": "number",
  "id": "speed-time",
  "label": "轮播时间",
  "default": 3000
},
        {
  "type": "number",
  "id": "font-size",
  "label": "字体的大小",
  "default": 12
},
       {
  "type": "number",
  "id": "speedNUM",
  "label": "每次轮播的展示的个数",
  "default": 3
}
    ],
    "blocks":[
      {
     "name":"marquee",
      "type":"marquee",
     "settings":[
         
          {
     "type": "text",
     "id": "marquee-icon",
     "label": "icon"
     },
	 {
  "type": "text",
  "id": "marquee-content",
  "label": "content",
  "default": "标志性艺术定制包裹"
    },
	{
  "type": "image_picker",
  "id": "image_with_text_image",
  "label": "Image"
  },
    {
  "type": "text",
  "id": "marquee-url",
  "label": "链接",
   "default": "false"
    }    
      ]
    }
    ],
     "presets": [
            {
              "name": "marquee",
               "blocks":[]
            }
         
        ]
  }

{% endschema %}