时间戳

首页 > 解决方案 > AMP Carousel 不能用于多个项目

html - AMP Carousel 不能用于多个项目

问题描述

我试图使用旋转木马。

在此处输入图像描述

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


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

谢谢维沙尔

标签： htmlamp-html

解决方案

我得到了这个问题的解决方案。对于多个项目和自动更改功能，我们不能使用 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 问题 和amp-base-carousel。

谢谢

维沙尔

推荐阅读