AMP 轮播不适用于多个项目

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

"autoplay" 属性与 "type=slides" 一起使用，幻灯片一次只有一张幻灯片。您混淆了两件事，"autoplay" 和 "type=carousel"，根据当前的 amp-carousel 规则这是不可能的。您可以在 AMP play ground 的轮播页面（第 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 and amp-base-carousel。

谢谢

维沙尔

AMP 轮播不适用于多个项目

AMP Carousel not working for more than one item

html

amp-html