AMP Carousel not working for more than one item

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