在 amp-carousel 上禁用 SWIPE 手势

Question

当 type="slides" 时，如何在移动设备的 amp carousel 上禁用滑动手势。

我有一个场景，我使用带预览的图片库点击预览图片查看特定图片。在移动设备上，我还可以通过滑动轮播幻灯片来滑动图像。我想禁用滑动效果，以便它仅在单击预览图像时起作用。

Answer 1

您可以通过使用 CSS 属性来实现您的目标 pointer-events:none

隐藏控件

.amp-carousel-button { display: none }

禁用滑动效果

#carouselWithPreview{pointer-events:none;}

结构看起来像

 <div class="slider-wrapper">
    <amp-carousel id="carouselWithPreview" width="400" height="300" layout="responsive" type="slides" on="slideChange:carouselWithPreviewSelector.toggle(index=event.index, value=true)">
      <amp-img src="https://unsplash.it/400/300?image=10" layout="fill" alt="a sample image"></amp-img>
      <amp-img src="https://unsplash.it/400/300?image=11" layout="fill" alt="a sample image"></amp-img>
      <amp-img src="https://unsplash.it/400/300?image=12" layout="fill" alt="a sample image"></amp-img>
      <amp-img src="https://unsplash.it/400/300?image=13" layout="fill" alt="a sample image"></amp-img>
    </amp-carousel>
    <amp-selector id="carouselWithPreviewSelector" class="carousel-preview" on="select:carouselWithPreview.goToSlide(index=event.targetOption)" layout="container">
      <amp-img option="0" selected src="https://unsplash.it/60/40?image=10" width="60" height="40" alt="a sample image"></amp-img>
      <amp-img option="1" src="https://unsplash.it/60/40?image=11" width="60" height="40" alt="a sample image"></amp-img>
      <amp-img option="2" src="https://unsplash.it/60/40?image=12" width="60" height="40" alt="a sample image"></amp-img>
      <amp-img option="3" src="https://unsplash.it/60/40?image=13" width="60" height="40" alt="a sample image"></amp-img>
    </amp-selector>
  </div>

在 amp-carousel 上禁用 SWIPE 手势

Disable SWIPE gesture on amp-carousel

amp-html