How to disable touch actions on carousel.

Topic: How to disable touch actions on carousel.

wandu-ar pro asked 5 years 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 5 years 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.

Add comment

wandu-ar pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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 5 years 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.

Add comment