CODEWITHSUNDEEP
amp-html
rajath hs
rajath hs

Reputation: 53

Disable SWIPE gesture on amp-carousel

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.

Upvotes: 0

Views: 1371

Answers (1)

Bachcha Singh
Bachcha Singh

Reputation: 3944

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>

Upvotes: 2

Related Questions