0

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

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Natesh
  • 331
  • 1
  • 4
  • 15

1 Answers1

0

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;
  }
}
Behram Bazo
  • 230
  • 2
  • 6
  • I just made a sample code on stackblitz for reference ... actual code snippet is shared above – Natesh Jan 02 '23 at 15:06