Question

我正在建立放大器网站，我使用了放大器旋转木马：
https://ampbyexample.com/components/amp-carousel/
https://www.ampproject.org/es/docs/reference/components/amp-carousel

我正在使用带有“幻灯片”和“自动播放”选项的旋转木马作为主页的主横幅，而我正试图在幻灯片前进时更改动画速度。

有没有办法设置动画速度或是否有功能请求？

Answer 1

目前似乎不支持转换速度。我面临同样的问题，无法找到任何文档或属性来控制动画速度。默认值太快，看起来不太好

Answer 2

您可以隐藏转盘并使用放大器选择器来创建自己的转盘。这不是最干净的方法，但至少您可以完全控制。

.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>

Answer 3

这是关于旋转木马速度的最接近的答案：

自动播放属性必须打开，默认的幻灯片间隔（我认为是您所指的速度）是5秒。您可以使用delay属性覆盖它。

autoplay (optional)

在没有用户互动的情况下将幻灯片推进到下一张幻灯片。

如果有：

默认情况下，以5000毫秒的间隔推进幻灯片（5   秒）;这可以被延迟属性覆盖。附上   如果循环尚未存在，则将循环属性设置为amp-carousel。   需要至少3张幻灯片才能进行自动播放。仅适用于   类型=幻灯片的旋转木马。 delay（可选）指定持续时间   （以毫秒为单位）在自动播放时延迟前进到下一张幻灯片   已启用。延迟属性仅适用于旋转木马   类型=幻灯片。

Answer 4

也许，您可以将淡入淡出用于我发现[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;}

here

更多...（仍在图库的图像预览中），为使其美观，我们可以添加：

.amp-carousel-slide:hover{
opacity:1;
cursor:pointer;
}

悬停在指针上。

有没有办法改变滑块动画的速度？

4 个答案: