轮播图模块

一个完全由 CSS 驱动的可滑动图片画廊——不涉及任何 JavaScript,因此能在每个支持底层 :checked 技术的客户端中正常工作,在其他任何地方则会降级为一张清晰的单图。

工作原理

动态层级是一台单选按钮状态机:每张幻灯片都拥有一个共享同一分组名称的隐藏单选输入框、一个渲染为圆点的标签,以及一个由 :checked ~ 兄弟选择器控制可见性的画框。点击某个圆点(在支持的地方也可以滑动)会勾选对应的单选框,匹配的画框随之变为可见,其余画框则保持 display:none。第一张幻灯片的单选框默认处于勾选状态,因此该模块总是从第一张幻灯片开始展示。这与手风琴和刮刮卡模块所依赖的机制相同,只是这里应用到的是一整排互斥的画框,而不是各自独立的开关。

在这套 CSS 技术不被支持的地方(Outlook 的 Word 渲染引擎,以及任何会剥离 <style> 代码块或忽略兄弟选择器的客户端),该模块会降级为一张静态卡片。这张卡片只显示第一张幻灯片的图片和说明文字,外加一个指向托管实时预览的"查看全部 N 张幻灯片"链接。实时预览是一个真正的网页,因此在那里每张幻灯片都只需一次点击即可查看,不会被遗漏;它复用的正是同一套 :checked 标记,因为真正的浏览器总是支持它。只有一张幻灯片的轮播图会跳过整台状态机,直接渲染为一张静态图片——没有画廊可供翻阅。

可配置字段,全部位于该模块自己的检查器面板中:

背景色——卡片自身的背景,与邮件主题无关。
内边距——模块的内部间距。
边框——整张卡片的宽度、样式与颜色。
卡片的圆角半径。
说明文字颜色和说明文字字号——统一应用于每张幻灯片的说明文字。

每张幻灯片(轮播图的子项,和树中其他任何项一样可以添加/重新排序)都带有自己的三个字段:一张图片(从你的媒体库中选取)、一段说明文字,以及一个可选的链接 URL。如果设置了链接,点击幻灯片图片会打开该链接,这与用于在幻灯片间切换的圆点导航互不影响。

翻看幻灯片并不是互动事件——收件人翻阅轮播图不会提交任何内容,因此轮播图的导航行为完全不会出现在响应仪表盘、CSV 导出或项目 Webhook 中。如果幻灯片自身设置了链接,它就是一个普通的带链接元素:会获得一个 "click" 动作,像按钮或带链接的图片一样经过收件人的追踪重定向,并计入项目的点击热力图。

示例

Subject

New arrivals just landed

新品发布邮件可以用轮播图展示一件新商品的三四个不同角度,每张幻灯片都链接到对应版本的商品页面——在任何一张主视觉图都难以充分展示商品的场合都很实用。参见电子商务与新品发布了解从促销邮件直接引导点击的更广泛模式。一份"本月新鲜事"摘要邮件可以为每个功能或每篇文章各配一张幻灯片,分别配上说明文字并链接到完整内容,让整份摘要压缩进一个可一眼扫过的模块,而不是一长条垂直堆叠的列表。一封活动回顾邮件可以翻看上次活动的照片,用说明文字标注每个瞬间。想看全部内容的收件人只需逐张翻阅,而客户端无法呈现动态效果的收件人依然能看到封面图和指向其余内容的链接。

静态回退效果是什么样子

<div style="margin:12px 0;background-color:transparent">
  <div class="carousel-fallback">
    <div class="lv-frame lv-frame-0">
      <a href="https://example.com/product-a">
        <img src="https://cdn.example.com/slide1.jpg" alt="Slide 1" style="width:100%;max-width:100%">
      </a>
      <p style="margin:8px 0 0;font-size:14px;color:#374151">Slide 1</p>
    </div>
    <p style="margin:8px 0 0;font-size:13px">
      <a href="https://mailinapp.com/v/eyJhbGci..." style="color:#4f46e5">See all 4 slides &rarr;</a>
    </p>
  </div>
</div>

这就是 Outlook 一类客户端所渲染出的内容:第一张幻灯片、它的说明文字,以及一个指向托管实时预览的链接,画廊的其余部分可以在那里查看。在支持动态层级的客户端中,同样的标记依然存在,只是被 CSS 隐藏了起来,取而代之的是单选框/圆点状态机在起作用。

轮播图模块

工作原理

示例

静态回退效果是什么样子

相关内容