amp-base-carousel
说明
沿水平轴或垂直轴显示多条类似的内容。
必需脚本
<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js"></script>
<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.js"></script> <link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css">
用法
用于沿水平轴或垂直轴显示多条类似内容的通用轮播。
amp-base-carousel
组件的每个直接子级都被视为轮播中的一个项目。这些节点中的每个节点还可以具有任意 HTML 子级。
轮播由任意数量的项目组成,以及可选的导航箭头,用于向前或向后移动一个项目。
如果用户滑动或使用可自定义的箭头按钮,轮播会在项目之间前进。
在有效的 AMP 文档之外独立使用
借助 Bento,您可以在非 AMP 页面中使用 AMP 组件,而无需完全遵守 AMP 规范。您可以获取这些组件,并将它们放置在不支持 AMP 的框架和 CMS 中的实现中。在我们的指南 在非 AMP 页面中使用 AMP 组件 中阅读更多内容。
要查找 amp-base-carousel
的独立版本,请参阅 bento-base-carousel
。
用户应注意的行为
从右到左的幻灯片更改
<amp-base-carousel>
要求您在从右到左 (rtl) 的上下文中定义它(例如阿拉伯语、希伯来语页面)。虽然不这样做的话,旋转木马通常也能正常工作,但可能会出现一些错误。您可以按照以下步骤让旋转木马知道它应作为 rtl
运行
<amp-base-carousel dir="rtl" …> … </amp-base-carousel>
如果旋转木马处于 RTL 上下文中,并且您希望旋转木马作为 LTR 运行,则可以在旋转木马上显式设置 dir="ltr"
。
幻灯片布局
当不指定 mixed-lengths
时,旋转木马会自动调整幻灯片的大小。您应为幻灯片提供 layout="flex-item"
<amp-base-carousel …> <amp-img layout="flex-item" src="…"></amp-img> </amp-base-carousel>
当旋转木马水平布局时,幻灯片的默认高度为 100%
。这可以通过 CSS 或使用 layout="fixed-height"
轻松更改。指定高度时,幻灯片将在旋转木马中垂直居中。
如果您想水平居中幻灯片内容,您将需要创建一个包装元素,并使用它来居中内容。
可见幻灯片数量
当使用 visible-slides
更改可见幻灯片数量以响应媒体查询时,您可能希望更改旋转木马本身的纵横比以匹配新的可见幻灯片数量。例如,如果您希望以一比一的纵横比一次显示三张幻灯片,那么您将希望旋转木马本身的纵横比为三比一。类似地,一次显示四张幻灯片,您将希望纵横比为四比一。此外,当更改 visible-slides
时,您可能希望更改 advance-count
。
<!-- Using an aspect ratio of 3:2 for the slides in this example. --> <amp-base-carousel layout="responsive" width="3" height="1" heights="(min-width: 600px) calc(100% * 4 * 3 / 2), calc(100% * 3 * 3 / 2)" visible-count="(min-width: 600px) 4, 3" advance-count="(min-width: 600px) 4, 3" > <amp-img layout="flex-item" src="…"></amp-img> … </amp-base-carousel>
属性
媒体查询
<amp-base-carousel>
的属性可以配置为根据 媒体查询 使用不同的选项。
配置选项
可见幻灯片数量
mixed-length
true
或 false
,默认为 false
。为 true 时,对每张幻灯片使用现有宽度(或水平时的现有高度)。这允许使用具有不同宽度的幻灯片的旋转木马。
visible-count
一个数字,默认为 1
。确定给定时间应显示多少张幻灯片。可以使用分数值来使部分其他幻灯片可见。当 mixed-length
为 true
时,此选项将被忽略。
advance-count
一个数字,默认为 1
。确定使用上一个或下一个箭头前进时,轮播将前进多少张幻灯片。在指定 visible-count
属性时,这很有用。
自动前进
auto-advance
true
或 false
,默认为 false
。根据延迟自动将轮播前进到下一张幻灯片。如果用户手动更改幻灯片,则自动前进将停止。请注意,如果未启用 loop
,则在到达最后一项时,自动前进将向后移动到第一项。
auto-advance-count
一个数字,默认为 1
。确定自动前进时,轮播将前进多少张幻灯片。在指定 visible-count
属性时,这很有用。
auto-advance-interval
一个数字,默认为 1000
。指定轮播自动前进之间的时间量(以毫秒为单位)。
auto-advance-loops
一个数字,默认为 ∞
。轮播在停止之前应该前进多少次幻灯片。
捕捉
snap
true
或 false
,默认为 true
。确定滚动时轮播是否应在幻灯片上捕捉。
snap-align
start
或 center
。当开始对齐时,幻灯片的开始(例如,水平对齐时的左边缘)与轮播的开始对齐。当中心对齐时,幻灯片的中心与轮播的中心对齐。
snap-by
一个数字,默认为 1
。这决定了捕捉的粒度,在使用 visible-count
时很有用。
其他
controls
"always"
、"auto"
或 "never"
,默认为 "auto"
。这决定了是否以及何时显示上一个/下一个导航箭头。注意:当 outset-arrows
为 true
时,箭头始终显示为 "always"
。
always
:始终显示箭头。auto
:当轮播最近通过鼠标接收交互时显示箭头,当轮播最近通过触摸接收交互时不显示箭头。在触摸设备上首次加载时,箭头显示,直到第一次交互。never
:从不显示箭头。
slide
一个数字,默认为 0
。这决定了轮播中显示的初始幻灯片。这可以与 amp-bind
一起使用,以控制当前显示哪张幻灯片。
loop
true
或 false
,省略时默认为 false
。为 true 时,旋转木马会允许用户从第一项移回最后一项,反之亦然。必须至少有 visible-count
三倍的幻灯片才能进行循环。
orientation
horizontal
或 vertical
,默认为 horizontal
。当为 horizontal
时,旋转木马将水平排列,用户可以左右滑动。当为 vertical
时,旋转木马将垂直排列,用户可以上下滑动。
通用属性
此元素包含 通用属性,已扩展到 AMP 组件。
操作
next
将旋转木马向前移动 advance-count
幻灯片。
prev
将旋转木马向后移动 advance-count
幻灯片。
goToSlide
将旋转木马移动到 index
参数指定的幻灯片。
活动
slideChange
当旋转木马显示的索引发生变化时,将触发此事件。新索引可通过 event.index
获得。
样式
你可以使用 amp-base-carousel
元素选择器自由设置旋转木马的样式。
自定义箭头按钮
可以通过传入你自己的自定义标记来自定义箭头按钮。例如,你可以使用以下 HTML 和 CSS 来重新创建默认样式
.carousel-prev, .carousel-next { filter: drop-shadow(0px 1px 2px #4a4a4a); width: 40px; height: 40px; padding: 20px; background-color: transparent; border: none; outline: none; } .carousel-prev { background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14,7.4 L9.4,12 L14,16.6" fill="none" stroke="#fff" stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" /></svg>'); } .carousel-next { background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10,7.4 L14.6,12 L10,16.6" fill="none" stroke="#fff" stroke-width="2px" stroke-linejoin="round" stroke-linecap="round" /></svg>'); }
<amp-base-carousel …> <div>first slide</div> … <button slot="next-arrow" class="carousel-next" aria-label="Next"></button> <button slot="prev-arrow" class="carousel-prev" aria-label="Previous" ></button> </amp-base-carousel>
如果你想对箭头按钮进行更多自定义,可以使用 next
和 prev
操作。例如,如果你想将按钮放在旋转木马下方,并使用“上一个”和“下一个”字样,而不是将它们放在默认位置,可以使用以下 HTML
<amp-base-carousel id="carousel-1" …> … <div slot="next-arrow"></div> <div slot="prev-arrow"></div> </amp-carousel> <button on="tap:carousel-1.prev()">Previous</button> <button on="tap:carousel-1.next()">Next</button>
版本说明
与 0.1
不同,amp-base-carousel
的实验性 1.0
版本允许通过 "orientation"="horizontal"|"vertical"
属性来配置旋转木马幻灯片方向,而不是 "horizontal"="true"|"false"
属性。
你已经阅读了本文档十多次,但它并没有真正涵盖你所有的问题?也许其他人也有同感:在 Stack Overflow 上联系他们。
转到 Stack Overflow 发现了一个错误或缺少某个功能?AMP 项目强烈鼓励你参与和做出贡献!我们希望你成为我们开源社区的持续参与者,但我们也欢迎针对你特别热衷的问题进行一次性贡献。
转到 GitHub