[英]How to show carousel dots in AMP?
In this carousel, how do I show dots? 在此轮播中,如何显示点?
<amp-carousel layout=fixed-height height=400 type=slides autoplay controls loop arrows dots='.'> <amp-img src="img/slaid.jpg" layout=fixed-height height=400></amp-img> <amp-img src="img/slaid.jpg" layout=fixed-height height=400></amp-img> </amp-carousel>
Navigational dots can be added by indicating it in the CSS Custom Properties, <style></style>
. 可以通过在CSS自定义属性<style></style>
进行指示来添加导航点。 Here's a Github sample from Styling/Theming with AMP : 这是来自AMP样式/主题的Github示例:
<head>
<style>
amp-carousel {
--arrow-color: green;
--dots: {
opacity: 50%;
color: blue;
}
}
</style>
</head>
<body>
<amp-carousel width=500 height=500>
<div>
<amp-img width=500 height=500 src="https://placekitten.com/g/500/500">
</amp-img>
</div>
<div>
<amp-img width=500 height=500 src="https://placekitten.com/g/500/500">
</amp-img>
</div>
</amp-carousel>
</body>
You can also check this SO thread for additonal reference. 您也可以检查此SO线程以获取其他参考。
There is an example in this codelab: https://codelabs.developers.google.com/codelabs/advanced-interactivity-in-amp/index.html 此代码实验室中有一个示例: https ://codelabs.developers.google.com/codelabs/advanced-interactivity-in-amp/index.html
The final code is here: 最终代码在这里:
<amp-carousel type="slides" layout="fixed-height" height=250 id="carousel" on="slideChange:AMP.setState({selected: {slide: event.index}})">
<amp-img width=200 height=250 src="./shirts/black.jpg" [src]="shirts[selected.sku].image"></amp-img>
<amp-img width=300 height=375 src="./shirts/black.jpg" [src]="shirts[selected.sku].image"></amp-img>
<amp-img width=400 height=500 src="./shirts/black.jpg" [src]="shirts[selected.sku].image"></amp-img>
</amp-carousel>
<p class="dots">
<span [class]="selected.slide == 0 ? 'current' : ''" class="current"></span>
<span [class]="selected.slide == 1 ? 'current' : ''"></span>
<span [class]="selected.slide == 2 ? 'current' : ''"></span>
</p>
https://github.com/googlecodelabs/advanced-interactivity-in-amp/blob/master/static/final.html https://github.com/googlecodelabs/advanced-interactivity-in-amp/blob/master/static/final.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.