Shopify模版定制：Shopify 纯CSS + Liquid 实现幻灯片功能（二）之水平轮播

最新推荐文章于 2026-04-23 12:08:32 发布

原创

最新推荐文章于 2026-04-23 12:08:32 发布 · 2.6k 阅读

本文详细介绍了如何使用纯CSS和Liquid来创建公告栏的轮播效果，包括垂直和水平轮播，通过计算延迟和速度来实现平滑的动画过渡。虽然无法用CSS监听用户交互事件，但提到了可以通过JS来补充这一功能，如滑动切换和点击切换。此外，还提供了Shopify主题中的相关设置和样式代码示例。

概要

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

效果

Shopify模版定制：纯CSS + Liquid 实现幻灯片功能（二）之水平轮播

步骤

一、创建分区

创建文件

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

写入代码

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

{
   
   %- liquid
  # 变量
  assign _settings = section.settings
  # 方向
  assign direction = _settings.direction | default: 'vertical'
  # 幻灯片高度
  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;
    --css-slide-length: {
   
   {
   
    size | plus: 1 }};
  }
  /* 创建动画 */
  @keyframes {
   
   {
   
    animation_name }} {
   
   
    {