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: {
   
   {