CODEWITHSUNDEEP
angularionic-frameworkswiper.js
Azhagappan Kathiresan
Azhagappan Kathiresan

Reputation: 51

How to loop slides in swiper.js angular?

I have implemented swiper.js in my ionic-angular application following the official docs. But even if i give loop:true, the slides aren't looping. The loop stops in the first slide.enter image description here

This is my config:

    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      speed: 3000,
      loop: true,
      slidesPerView:1,
      effect: 'cube',
      grabCursor: true,
      autoHeight: false,
    }
This is my HTML :
        <swiper style="background-color: #121318;" [config]="configRestText">
            <ng-template swiperSlide *ngFor="let texts of restText">
              <p style="color: white; 
                        font-size: 1rem;">
                        <ion-icon name="information-circle-outline"></ion-icon>
                      {{texts}}</p>
            </ng-template>
        </swiper>

Upvotes: 0

Views: 3900

Answers (1)

Callan
Callan

Reputation: 1233

I use something like this:

TS:

 @ViewChild('swiper') swiper: SwiperComponent;

 animationInProgress = false;
  config = {
    slidesPerView: 4,
    spaceBetween: 10,
    pagination: true,
    loop: true,
  }

 ngOnInit(): void {
    this.startAnimation();
  }

   startAnimation() {
    if(this.animationInProgress) return;
    this.animationInProgress = true;
    setTimeout(() => {
      this.swiper.swiperRef.slideNext(2000);
      this.animationInProgress = false;
      this.startAnimation();
    }, 5000);
  }

  next() {
    this.swiper.swiperRef.slideNext(1000);
  }

HTML:

  <swiper #swiper [config]="config">
    <ng-template swiperSlide *ngFor="let item of items">
           ....
    </ng-template>
  </swiper>

I followed the IonicAcademy tutorial (here / video here) and read the swiperjs documentation (here).

Upvotes: 1

Related Questions