我正在建立放大器网站，我使用了放大器旋转木马：
https://ampbyexample.com/components/amp-carousel/
https://www.ampproject.org/es/docs/reference/components/amp-carousel
我正在使用带有“幻灯片”和“自动播放”选项的旋转木马作为主页的主横幅，而我正试图在幻灯片前进时更改动画速度。
有没有办法设置动画速度或是否有功能请求？
答案 0 :(得分：2)
目前似乎不支持转换速度。我面临同样的问题，无法找到任何文档或属性来控制动画速度。默认值太快，看起来不太好
答案 1 :(得分：1)
您可以隐藏转盘并使用放大器选择器来创建自己的转盘。这不是最干净的方法，但至少您可以完全控制。
.carouselWrapper{
position: relative;
}
.carouselOverideSlider{
background-color: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
}
.carouselOverideSlider li[aria-selected="true"] amp-img{
transition: transform 15s;
transform-origin: 50% 50% 0px;
transform: scale(1.1);
}
.carouselOverideSlider li[option][selected] {
opacity:1;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
.carouselOverideSlider li{
opacity:0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.carouselOverideSlider ul, .carouselOverideSlider li{
margin:0;
padding:0;
list-style:none;
}
.dots-container {
position: absolute;
display: flex;
justify-content: center;
bottom: 0;
right: 0;
left: 0;
z-index:110;
}
.dots {
max-width: 150px;
text-align: center;
align-self: center;
}
.dots li {
width:13px;
height:13px;
margin:13px;
border-radius:10px;
border:1px solid rgba(0,0,0,0.3);
background:rgba(255,255,255,0.5);
display:inline-block;
}
.dots li[option][selected] {
outline:0px solid rgba(0,0,0,0.7);
border:1px solid #1da838;
background:#fff;
}
.amp-carousel-button{
display:none;
}<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="description" content="This is the AMP Boilerplate.">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<!-- Import other AMP Extensions here -->
<style amp-custom>
/* Add your styles here */
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript>
<style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
</noscript>
<link rel="canonical" href=".">
<title>My AMP Page</title>
</head>
<body>
<div class="carouselWrapper">
<amp-carousel id="custom-button"
width="800"
height="533"
layout="responsive"
type="slides"
autoplay
delay="5000"
on="slideChange:
debbie.toggle(index=event.index, value=true),
dalas.toggle(index=event.index, value=true)">
<amp-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/View_from_Reunion_Tower_August_2015_13.jpg/800px-View_from_Reunion_Tower_August_2015_13.jpg"
width="800"
height="533"
layout="responsive"
alt="a sample image"></amp-img>
<amp-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Flag_of_Dallas.svg/800px-Flag_of_Dallas.svg.png"
width="800"
height="533"
layout="responsive"
alt="another sample image"></amp-img>
</amp-carousel>
<div class="carouselOverideSlider">
<amp-selector id="dalas">
<ul class="">
<li option="0" selected>
<amp-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/View_from_Reunion_Tower_August_2015_13.jpg/800px-View_from_Reunion_Tower_August_2015_13.jpg"
width="800"
height="533"
layout="responsive"
alt="a sample image"></amp-img>
</li>
<li option="1">
<amp-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Flag_of_Dallas.svg/800px-Flag_of_Dallas.svg.png"
width="800"
height="533"
layout="responsive"
alt="another sample image"></amp-img>
</li>
</ul>
</amp-selector>
</div>
<div class="dots-container">
<amp-selector id="debbie"
on="select:custom-button.goToSlide(index=event.targetOption)"
layout="container">
<ul id="carouselDots" class="dots">
<li option="0" selected></li>
<li option="1"></li>
</ul>
</amp-selector>
</div>
</body>
</html>
答案 2 :(得分：0)
这是关于旋转木马速度的最接近的答案：
自动播放属性必须打开，默认的幻灯片间隔（我认为是您所指的速度）是5秒。您可以使用delay属性覆盖它。
在没有用户互动的情况下将幻灯片推进到下一张幻灯片。
如果有：
默认情况下，以5000毫秒的间隔推进幻灯片（5 秒）;这可以被延迟属性覆盖。附上 如果循环尚未存在，则将循环属性设置为amp-carousel。 需要至少3张幻灯片才能进行自动播放。仅适用于 类型=幻灯片的旋转木马。 delay（可选）指定持续时间 （以毫秒为单位）在自动播放时延迟前进到下一张幻灯片 已启用。延迟属性仅适用于旋转木马 类型=幻灯片。
答案 3 :(得分：0)
也许，您可以将淡入淡出用于我发现[expr.prim.lambda.capture]/11的幻灯片过渡。 不错：）
.amp-carousel-slide {
opacity:0;
}
.amp-carousel-slide[aria-hidden=false] {
transition:opacity 1s;
opacity:1;
但是，如果您在amp-carousel中使用图库，则必须将不透明度更改为0.4或更高。否则，图像预览 将不会显示。 ：v
示例：
.amp-carousel-slide {opacity:0.7;}
更多...（仍在图库的图像预览中），为使其美观，我们可以添加：
.amp-carousel-slide:hover{
opacity:1;
cursor:pointer;
}
悬停在指针上。