ionic framework slides component “loop” option

Question

I am currently developing an application using Ionic-Angular. for slides I am using ionic 4 ion-slides component and every thing works fine but I was looking for a way to loop the slides so that user can have swipe with no locking at the end of array according to ionic docs => ion-slides

and Swiper API

I can achieve this by using loop property in options, so I followed the instruction but it doesn't seem to work and the slide locks at the end of the array My HtMl code is:

<ion-slides #theSlides [options]="slideOpts"   id="peerSlide">
    <ion-slide *ngFor="let peer of peers;let i = index">
       <img id="{{'x' + i}}" class="peerIcon" [src]="peer.icon" >
     </ion-slide>
</ion-slides>
<img class="nextIcon" src="../../assets/imgs/nextIcon/[email protected]" (click)="moveToNext(theSlides)">
<img class="prevIcon" src="../../assets/imgs/prevIcon/[email protected]" (click)="moveToPrev(theSlides)">

and my .ts file:

export class LivePage implements OnInit {
  @ViewChild('theSlides' , {  static: true }) slides: IonSlides;
 
  slideOpts = {
  loop: true,
   };

  ...
  moveToNext(slides) {
   slides.slideNext()
  }
  moveToPrev(slides) {
   slides.slidePrev()
  }
 }

I appreciate if you can tell what is wrong here with my code thank you.

Update: when i try it with out ngFor the loop will work fine but with ngFor it doesn't

Loop is working in my app. Check documentation. 1> github.com/ionic-team/ionic-docs/blob/master/src/demos/api/… 2> ionicframework.com/docs/api/slides#properties — Janitha Rasanga
im afraid i cant the peer object comes from server in my app — tara afzali

wissem chiha wissem chiha · Accepted Answer · 2020-10-09T13:49:00

It's worked for me with same code ("@ionic/angular": "^5.0.0") try to update your dependancies

ionic framework slides component “loop” option

1 Answers