amp-base-carousel循环不会循环通过carousel

Question

尝试向amp-base-carousel添加一个循环，但当我单击上一个或下一个箭头时，没有发生循环。一旦旋转木马转到最后一个图像，箭头就被禁用了。

 <amp-base-carousel  height="300" width="1100" layout="fixed" visible-count="(min-width:840px) 3, (min-width: 440px) 2, 1" advance-count="2" loop="true">
        <amp-img src="images/TR.png" width="400" height="300" alt="a sample image" layout="flex-item"></amp-img>
        <amp-img src="images/horizon.jpg" width="400" height="300" alt="another sample image" layout="flex-item"></amp-img>
        <amp-img src="images/uncharted.jpg" width="400" height="300" alt="and another sample image" layout="flex-item"></amp-img>
        <amp-img src="images/ratchet.jpg" width="400" height="300" alt="and another sample image" layout="flex-item"></amp-img>
    </amp-base-carousel>

Answer 1

你只能使用type="slides“来应用循环。试试这个例子，这是一种从幻灯片制作旋转木马的巧妙方法：

<amp-base-carousel
    layout="responsive" // or fixed-height
    height="1"
    width="1"
    heights="500px"
    visible-count="(min-width: 1600px) 2, 1" // Magic 1
    snap="true" // Magic 2
    snap-align="center" // Magic 3
    snap-by="1"
    loop="true"
    slide="1"
>   
</amp-base-carousel>

并使用CSS调整子幻灯片的宽度：

.inner-slide { 
    width: calc(100% - 6vw);
    margin-left: 3vw;
    height: 100%;
}

请注意，对于特定配置，必须至少有6张幻灯片