How to disable touch actions on carousel.


Topic: How to disable touch actions on carousel.

wandu-ar pro premium asked 8 months ago

Expected behavior I have a only one manually controlled carousel and I want the user not to advance to the next slide by touch swapping. ¿how to prevent this? Only disable touch gestures on this carousel. In normal boostrap, i have "data-touch=false"

Actual behavior User can change the current slide of carousel making touch swap.

Resources (screenshots, code snippets etc.)

      <!--Carrousel-->
      <mdb-carousel
        #mySlider
        class=""
        [isControls]="false"
        [animation]="'slide'"
        [interval]="'0'"
        [noWrap]="true"
        [keyboard]="false">

        <!--Slide 0-->
        <mdb-carousel-item>
          <div class="carousel-slide">
            <div class="text-center">
              <p>Example 1</p>
            </div>
          </div>
        </mdb-carousel-item>
        <!--./Slide 0-->

         <!--Slide 1-->
        <mdb-carousel-item>
          <div class="carousel-slide">
            <div class="text-center">
              <p>Example 2</p>
            </div>
          </div>
        </mdb-carousel-item>
        <!--./Slide 1-->

        <!--Slide 2-->
        <mdb-carousel-item>
          <div class="carousel-slide">
            <div class="text-center">
              <p>Example 3</p>
            </div>
          </div>
        </mdb-carousel-item>
        <!--./Slide 2-->

      </mdb-carousel>
      <!--./Carrousel-->

I try prevent this behavior with @HostListener decorator, but not work.

  @HostListener('swipeleft', ['$event']) public swipeLeft(event: any) {
      console.log(event); // this works and show event data
    return false;
  }

Thanks!


Konrad Stępień staff commented 8 months ago

Hi @wandu-ar,

Did you condfigure your app.module file?

Unfortunately, probably it is not possible to turn it off in the app.

You can probably get rid of this error by using css and cover the element with -index and discover only controls.

I'll add this feature to our 'to do' list.


wandu-ar pro premium answered 8 months ago

Yes, i configure my app module.

I edit the method swipe in mdb libraries and comment default behavior. Then i can use the hostlistener swipe event of component if i want when swipe change slide

 // example on fesm2015
swipe(action = this.SWIPE_ACTION.RIGHT) {
    if (action === this.SWIPE_ACTION.RIGHT) {
        //this.previousSlide();
        this.cdRef.markForCheck();
    }
    if (action === this.SWIPE_ACTION.LEFT) {
        //this.nextSlide();
        this.cdRef.markForCheck();
    }
}

This works and is a my temporary solution. Please, considering an config option for this on the next version. Thanks.


Konrad Stępień staff commented 8 months ago

Hi @wandu-ar,

Thank you for your solution. I forward it to our technical team and probably we add this feature in the near future.

Best, Konrad.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 8.8.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No