Question

我试图使用轮播。

如上图所示，我尝试设置轮播，但不会自动更改。如果我使用自适应布局，它会自动更改，但一次只显示一项。


<amp-list id="list_id" width="350" height="150" layout="flex-item"
                    src="somesrc">
<template type="amp-mustache">
                        <amp-carousel width="350" height="150" layout="fixed" type="carousel" autoplay delay="2000"
                            loop>
                            {{#values}}
                            <div role="text">
                                <amp-img src="{{image_link}}" layout="fixed" width="100" height="100" alt="{{title}}"
                                    role="button" tabindex="0"
                                    on="tap:AMP.setState({ mytext: 'somedata' })">
                                </amp-img>
                                <p class="category_label">{{category}}</p>
                            </div>
                            {{/values}}
                        </amp-carousel>
                    </template>
                </amp-list>

如果同时显示多个项目，是否有任何方法可以自动更换传送带。

脚本：

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

谢谢维沙尔

Answer 1

“自动播放”属性与“类型=幻灯片”一起使用，并且幻灯片一次只能包含一张幻灯片。您正在将“自动播放”与“类型=轮播”混为一谈，这是当前根据amp-carousel规则无法实现的。您可以在AMP游乐场的转盘页面（第3部分）上了解此内容：AMP playground

据我所知，此限制之所以存在，是因为自动播放会前进到下一张幻灯片，现在如果是轮播类型，则不会从那里滚动该指针，因为这取决于屏幕的大小，其中有多少图像一张幻灯片，也可能一半的图像出现在第一张幻灯片中，而另一半图像出现在下一张幻灯片中，这可能是原因。

Answer 2

我已经解决了这个问题。对于多个项目和自动更改功能，我们不能使用amp-carousel，而必须使用amp-base-carousel。

需要脚本：

<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>

代码：

<amp-list id="list_id" width="350" height="150" layout="flex-item"
                    src="your url">
                    <template type="amp-mustache">
                        <amp-base-carousel width="350" height="150" layout="fixed" snap="true" auto-advance="true" visible-count="3"
                            loop="true">
                            {{#values}}
                            <div role="text">
                                <amp-img src="{{image_link}}" layout="fixed" width="100" height="100" alt="{{title}}"
                                    role="button" tabindex="0">
                                </amp-img>
                                <p class="category_label">{{category}}</p>
                            </div>
                            {{/values}}
                        </amp-base-carousel>
                    </template>
                </amp-list>

检查此链接github issue和amp-base-carousel。

谢谢

维萨尔

AMP Carousel不能用于多个项目

2 个答案: