CODEWITHSUNDEEP
angularswiper.js
Daniele Argiolas
Daniele Argiolas

Reputation: 126

Swiper autoplay not working in Angular (single slide)

I am using swiperjs with angular (v 12) and I would like to set specific delay for each slide. I 've imported {Autoplay} from 'swiper/core' and called the method SwiperCore.use( [Autoplay]). If I set a delay for all slides, it works fine:

// .ts component
import SwiperCore, { Autoplay } from 'swiper'

SwiperCore.use([Autoplay])

autoplay: AutoplayOptions | boolean = {
  delay: 3000,
  disableOnInteraction: false
}

// .Html 
<swiper
  #swiperSlideShow
  [slidesPerView]="1"
  [spaceBetween]="50"
  (swiper)="onSwiper($event)"
  (slideChange)="onSlideChange()"

  [loop]="true"
  [autoplay]="true"
  [effect]="'coverflow'"
  [coverflowEffect]="coverflowEffect"

  [parallax]="true"
  [keyboard] = "keyboard"
  [speed]="1800"
>

  <ng-template swiperSlide >
    <div >
        <app-slide-three></app-slide-three>
    </div>
     <div >
        <app-slide-ex></app-slide-ex>
    </div>
    <div >
        <app-slide-dy></app-slide-dy>
    </div>

  </ng-template>

But 'data-swiper-autoplay' is ignored and <ng-template swiperSlide data-swiper-autoplay="5000" > keeps the default value of delay (3000) and I dont know if there is a specific Angular way to assign this delay to a single slide, in the documentation is not specified..

Upvotes: 3

Views: 10500

Answers (4)

Deval Kathrecha
Deval Kathrecha

Reputation: 11

I am using SwiperJS with Ionic(7)+Angular(15) as described here I was not getting the attribute in HTML, Solved it using "attr."

<swiper-slide *ngFor="let slide of slides;" [attr.data-swiper-autoplay]="slide.time">

Example :

slide = {title: "Lorem ipsum", time: 1000}

Don't forget to turn autoplay on,

ionViewDidEnter() {
    let swiper = new Swiper('.swiper-container', {
      loop: true,
      autoplay: true
    })
}

Upvotes: 0

JMK
JMK

Reputation: 28059

I couldn't get the AutoComplete module to work at all, so ended up implementing this myself, like so:

Pass the swiper instance to the component:

<swiper (swiper)="setSwiperInstance($event)">

Then in my component:

setSwiperInstance(swiper: Swiper) {
  setInterval(() => {
    swiper.slideNext();
  }, 3000);
}

Bit of a hack but it works :)

Upvotes: 2

Eduardo Gonz&#225;lez Moreno
Eduardo Gonz&#225;lez Moreno

Reputation: 31

I solved it in the following way. You should get the reference of the swipe element:

//**** HTML:
<swiper [config]="config" #swiperSlideShow>...</swiper>


//**** .ts component:
import SwiperCore, {Autoplay} from 'swiper';
SwiperCore.use([Autoplay]);
import { SwiperComponent } from 'swiper/angular';
//...
  @ViewChild('swiperSlideShow') swiperSlideShow!: SwiperComponent;
  config: SwiperOptions = {};
        
  constructor() {}

  ngOnInit(): void {}
        
  ngAfterViewInit(): void
  {
    this.config = {
      //...
      autoplay: {
        delay: 6000,
        disableOnInteraction: false
      }
    }
    
    // Start autoplay
    this.swiperSlideShow.swiperRef.autoplay.start();
  }

Note: If you are going to use extra options in the SwiperOptions (like breakpoints) then you must use ngAfterContentInit instead of ngAfterViewInit.

Upvotes: 3

roya
roya

Reputation: 304

I could find a way, try this:

.Html:

<swiper class="mySwiper" 
[autoplay]= "{
delay: 1000*items[0].duration
}"
(slideChange)="onSlideChange($event)">
  <ng-template swiperSlide *ngFor="let item of items">
    <div class="content">{{item.title}}</div>
  </ng-template>
</swiper>

.ts:

onSlideChange(swiper: any) {
swiper.params.autoplay.delay = 1000*this.items[swiper.realIndex].duration;}

Upvotes: 3

Related Questions