Shopify模版定制: 纯CSS + Liquid 实现幻灯片功能（一） 之上下轮播

概述

使用纯CSS解决各种问题，不仅能简化代码、还能优化网站加载和阻塞等，更是前端工程师能力的体现。下面将通过公告栏上线轮播的示例，详细讲解如何使用纯css + liquid 实现幻灯片功能（slide的内容可以替换成任何你想要的内容）。下篇文章将会还会为大家提供左右轮播的效果，后面还会写基于该功能写一个照片墙跑马灯滚动，同样也是纯CSS来实现。当然由于纯css没法监听滑动和点击等一些事件切换（滑动切换和点击切换按钮切换），这些只能通过js实现。不过可以做悬停暂停播放。来源

我也不多说废话了，咱直接上代码

效果

步骤

一、创建分区

创建文件

在 sections 下创建 yl-announcement-bar-01.liquid

写入代码

代码里面都详细写了每段代码的作用

{%- liquid
  # 变量
  assign _settings = section.settings
  # 幻灯片高度
  assign slideHeight = _settings.height_slide | default: 30
  # size: 幻灯片数量
  assign size = section.blocks.size
  # 动画名称
  assign animation_name = 'css_slideshow_' | append: section.id

  ## 核心代码 ##

  # | 1: delay + speed | 2: delay + speed | ... | n: delay + speed | 
  # 计算时间

  # 自动切换的时间间隔，单位ms
  assign delay = _settings.delay | default: 3000 
  # 切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
  assign speed = _settings.speed | default: 300
  # 每个item的占有时间
  assign slide_time = delay | plus: speed
  # 总时长
  assign total_time = slide_time | times: size

  # 动画过程如下如下
  # ｜1: 等待切换过程 切换过程 ｜2: 等待切换过程 切换过程 ｜...｜n: 等待切换过程 切换过程 ｜
  # 计算每个过程占比，总过程为 100%

  # 单个幻灯片的占有时间占总时间的比例（等待切换过程+切换过程），精确到0.0001，单位：%
  # = 单个幻灯片时长 / 总时长 * 100
  assign slide_zb = slide_time | times: 1000000 | divided_by: total_time | times: 0.0001
  # 单个幻灯片的等待切换过程占总时间的比例，精确到0.0001，单位：%
  # = 单个幻灯片等待切换时长 / 总时长 * 100
  assign delay_zb = delay | times: 1000000 | divided_by: total_time | times: 0.0001
  # 单个幻灯片的切换过程占总时间的比例，精确到0.0001，单位：%
  # = 单个幻灯片切换时长 / 总时长 * 100
  # assign speed_zb = speed | times: 1000000 | divided_by: item_time | times: 0.0001
-%}
{%- style -%}
  #shopify-section-{{ section.id }} {
    background: {{ _settings.color_section_bg }};
    color: {{ _settings.color_section }};
    margin: {{ _settings.margin_section }};
    text-align: {{ _settings.align_section }};
    --css-slide-height: {{ slideHeight }}px;
  }
  /* 创建动画 */
  @keyframes {{ animation_name }} {
    {%- for i in (0..size) -%}
      {%- liquid
        # 示例：假设高度为 30 过程应该, i = n - 1
        # | 1: b1: -0 b2: -0 b3: -30 | 2: b1: -30 b2: -30 b3: -60 | ... | n: b1: -30 * (n-1) b2: -30 * (n-1) b3: -30 * n | 
        # 这里我们可以对上面过程进行简化，因为 b3 = 下一个幻灯片的b1, 所以可以忽略b3。但是需要注意 最后一个幻灯片需要添加 b3，且必须为100%, 这里为了最后一个b2 不是100%，则会出现过渡过程（倒退）。简化后解结果如下
        # | 1: b1: -0 b2: -0 | 2: b1: -30 b2: -30 | ... | n: b1: -30 * (n-1) b2: -30 * (n-1) b3: 100% | 
        # b1: 等待切换
        assign b1 = i | times: slide_zb
        # b2: 开始切换
        assign b2 = b1 | plus: delay_zb
        # translateY 偏移量, 注意 此时的 Y 为正数
        assign Y = i | times: slideHeight
        # 通过公式我们可以得出下面的写法
      -%}
      {%- if forloop.last %}
      100% { transform: translateY(-{{ Y }}px); }
      {%- else %}
      {{ b1 }}% { transform: translateY(-{{ Y }}px); }
      {{ b2 }}% { transform: translateY(-{{ Y }}px); } 
      {% endif -%}
    {%- endfor -%}
  }
  #shopify-section-{{ section.id }} .yl-css-slides {
    animation: {{ animation_name }} {{ total_time }}ms linear infinite;
  }

{%- endstyle -%}
<div class="yl-container">
  <div class="yl-css-slideshow">
    <ul class="yl-css-slides">
      {%- for block in section.blocks -%}
        <li class="yl-css-slide" {{ block.shopify_attributes }}>
          <div>
            {%- if block.settings.url -%}
              <a href="{{ block.settings.url }}">{{ block.settings.text }}</a>
            {%- else -%}
              {{ block.settings.text }}
            {%- endif -%}
          </div>
        </li>
      {%- endfor -%}
      {%- assign block_first = section.blocks.first -%}
      <li class="yl-css-slide" {{ block_first.shopify_attributes }}>
        <div>
          {%- if block.settings.url -%}
            <a href="{{ block.settings.url }}">{{ block.settings.text }}</a>
          {%- else -%}
            {{ block.settings.text }}
          {%- endif -%}
        </div>
      </li>
    </ul>
  </div>
</div>
{% schema %}
{
  "name": "壹零公告栏 01",
  "class": "section-yl-announcement-bar-01",
  "settings": [
    {
      "type": "number",
      "id": "delay",
      "label": "切换时间间隔，单位ms",
      "default": 3000
    },
    {
      "type": "number",
      "id": "speed",
      "label": "过渡时间，单位ms",
      "default": 300
    },
    {
      "type": "number",
      "id": "height_slide",
      "label": "幻灯片高度, 单位：像素",
      "default": 30
    },
    {
      "type": "select",
      "id": "align_section",
      "label": "对齐方式",
      "options": [
        {
          "value": "center",
          "label": "居中"
        },
        {
          "value": "left",
          "label": "左对齐"
        },
        {
          "value": "right",
          "label": "右对齐"
        }
      ],
      "default": "center"
    },
    {
      "type": "color_background",
      "id": "color_section_bg",
      "label": "分区背景颜色",
      "default": "linear-gradient(#000, #000)"
    },
    {
      "type": "color",
      "id": "color_section",
      "label": "分区文案颜色",
      "default": "#fff"
    },
    {
      "type": "text",
      "id": "margin_section",
      "label": "分区边界",
      "default": "80px 0"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "幻灯片",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "文案",
          "default": "壹零建站，让您的网站更优秀！"
        },
        {
          "type": "url",
          "id": "url",
          "label": "链接"
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "公告栏",
      "name": "公告栏 01",
      "blocks": [
        {
          "type": "slide",
          "settings": {
            "text": "壹零建站，让您的网站更优秀！"
          }
        },
        {
          "type": "slide",
          "settings": {
            "text": "https://www.yilingweb.com",
            "url": "https://www.yilingweb.com"
          }
        },
        {
          "type": "slide",
          "settings": {
            "text": "VX: abc939039210"
          }
        }
      ]
    }
  ]
}
{% endschema %}

二、创建CSS

创建文件

在 assets 下创建 yl-announcement-bar-01.css

写入代码

.yl-css-slideshow {
  height: var(--css-slide-height);
  overflow: hidden;
}
.yl-css-slideshow:hover .yl-css-slides {
  /* 悬停时暂停动画 */
  animation-play-state:paused !important;
  -webkit-animation-play-state:paused !important;
}
.yl-css-slide {
  height: var(--css-slide-height);
  line-height: var(--css-slide-height);
}

引入文件

在 theme.liquid <head> 与 </head> 之间插入下面代码

{{ 'yl-announcement-bar-01.css' | asset_url | stylesheet_tag }}

后台效果