Next button not working

[kshkrao3]

I have integrated ngx-carousel [banner mode] with firebase - firestore and am having simple set-up as below:

app-component.html

<ngx-carousel [inputs]="carouselOne" (carouselLoad)="loadCarousel($event)">
       <ngx-item NgxCarouselItem *ngFor="let carou of carouselData | async">
             <img [src]="carou.image" class="responsive-img" alt="carou.description" />
       </ngx-item>

      <button NgxCarouselPrev class='leftRs'>&lt;</button>
      <button NgxCarouselNext class='rightRs'>&gt;</button>
</ngx-carousel>

app.component.ts

  public carouselData: Observable<Carousel[]>;
  private carouseCollection: AngularFirestoreCollection<Carousel>;
  public carouselOne: NgxCarousel;
  constructor(
    private httpService: HttpDataService
  ) {}

  public loadCarousel(event: Event) {
    this.carouseCollection = this.httpService.getCaroselData();
    this.carouselData = this.carouseCollection.valueChanges().map(record => {
      return record;
    });
  }

  ngOnInit() {
    this.carouselOne = {
      grid: { xs: 1, sm: 1, md: 1, lg: 1, all: 0 },
      slide: 1,
      speed: 900,
      interval: 4000,
      point: {
        visible: true,
      },
      load: 5,
      touch: true,
      loop: true,
      custom: 'banner'
    };
  }

httpService.ts

getCaroselData(): AngularFirestoreCollection<Carousel>{
        return this.afs.collection<Carousel>('carousel', ref => ref.orderBy('createddate', 'desc').limit(7));
}

Once the last image of the carousel, clicking the next button would load the same image again and again and it's not looping back to first.

Let me know if you need more information on this?

[sheikalthaf]

hi,

Apply onMove in your carousel

<ngx-carousel
      [inputs]="carouselOne"
      (onMove)="onmoveFn($event)"
      (carouselLoad)="loadCarousel($event)">
</ngx-carousel>

In your component class

/* It will be triggered on every slide*/
  onmoveFn(data: NgxCarouselStore) {
    console.log(data);
  }

Check what your getting in the console after moved to last image And reply me here with console data

[kshkrao3]

Console.log(data) gives me below from last request and it doesn't change..

carouselWidth:1359
classText:"ngxcarouselujsBTN"
currentSlide:2
deviceType:"lg"
deviceWidth:1366
dexVal:0
easing:"cubic-bezier(0, 0, 0.2, 1)"
isEnd:false
isFirst:false
isLast:false
itemLength:3
itemWidth:1359
itemWidthPer:0
items:1
load:3
loop:true
slideItems:1
speed:900
touch:{
       active: true, 
       swipe: "", 
       velocity: 0
}
touchTransform:0
transform:{xs: 200, sm: 200, md: 200, lg: 200, all: 0}
type:"responsive"
visibleItems:{start: 2, end: 2}

Anything else I can help with?

Also, I would like to add here, when this reaches the end with automatic slideshow, this doesn't slide from the start. It keeps on displaying the last image.