amp-base-carousel循环不会通过循环传送带循环

如何解决amp-base-carousel循环不会通过循环传送带循环

试图在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>

解决方法

您只能使用 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 张幻灯片