nguCarousel slider not working properly on touch without using prev or next button Angular

282 Views Asked by At

I have used ngu-carousel there are more than 100 data items in that user is trying to slide using touch it is not sliding smoothly getting issue, I want to use it without next and prev button because mobile screen is small

myapp.ts file

 this.carouselOne = {
      grid: { xs: 2, sm: 2, md: 3, lg: 4, xl: 6, all: 0 },
      slide: 2,
      speed: 400,
      interval: 4000,
      point: {
        visible: true
      },
      load: 2,
      touch: true,
      custom: "banner"
    };

myapp.html

<div class="card-block-carousel" #carouselContainer id="carouselContainer">
    <div [@cardToggle]="cardToggle" class="overflowvis">
      <ngu-carousel [inputs]="carouselOne">
        <ngu-item *ngFor="let freebie of data">
           
          /// my card divs here

        </ngu-item>
      </ngu-carousel>
    </div>

I have made one slackblitz sample code for understanding if you check slider with touch not working smoothly ( https://stackblitz.com/edit/ngu-carousel-demo-jn8laf?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fsimple%2Fsimple.component.ts,src%2Fapp%2Fsimple%2Fsimple.component.html )

Please suggest what to do about this issue

1

There are 1 best solutions below

1
Behram Bazo On

I checked out your project in stackblitz. I saw your carousel version 1.5.2. That is very old version. currently latest version 7.0.0. I think that you should upgrade your version and after that follow this code:

NguCarouselConfig = {
    point: {
      visible: false
    },
    touch: true,
  };

But if you don't want to upgrade your version, you must solve this problem with CSS.

@media (max-width: 600px) {
  .myPoint {
    display: none;
  }
}