How to disable Swipe gesture on amp carousel in mobile when type="slides".
I have a scenario where I view certain image on click of preview image using Image gallery with preview. and in mobile, I can also slide images by swiping the carousel slides. and I want to disable swiping effect so that it works only on the click of the preview image.
You can achieve your goal by using CSS properties pointer-events:none
Hide the controls
.amp-carousel-button { display: none }
Disable the swiping effect
#carouselWithPreview{pointer-events:none;}
Structure look like
<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>