AMP Carousel 不适用于多个项目

Question

I trying to use carousel.

as per above image i try to set up a carousel but it is not changing automatically. if i use responsive layout that it is changing automatically but it showing only one item at time.

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

is there any way for auto change of carousel if more than one item display at same time.

Scripts:

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

Thanks Vishal

Answer 1

I got solution of this problem. for more than one item and auto change feature we can not use amp-carousel we have to use amp-base-carousel.

Require Script:

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

Code:

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

check this links github issue and amp-base-carousel .

Thanks

Vishal

Answer 2

"autoplay" attribute works with "type=slides" and slides will have only single slide at a time. You are mixing up two thing, "autoplay" with "type=carousel" which is not possible as per current rules of amp-carousel. You can read about this here on AMP play ground's carousel page(3rd section) : AMP playground

As per my limited knowledge this restriction is there because autoplay advances to next slide, now if in carousel type, that pointer from where to scroll will not be there, because it depends upon the screen size how many images will be there in one slide, it also might possible that half of the image comes in 1st slide and another half of that image comes in next slide so that might be the reason.