3

—— Issue ——

Hello, I dont understand why swiper is not starting like autoplay must be.

When I look into the swiper instance from (swiper) event, I got this results :

  1. swiper.params.autoplay: {delay: 1000, enabled: true}
  2. swiper.autoplay: { running: false, paused: false, pause: [Function], run: [Function], start: [Function], stop: [Function] }

It seem swiper as load my configuration correctly but wont start the autoplay.

Hope someone can understand why and help this thread .

—— Code ——

I added SwiperModule in imports of my NgModule (home.module.ts).

home.page.ts

import { Component, OnInit } from '@angular/core';
import Swiper, { Autoplay } from 'swiper';
import { IonicSlides } from '@ionic/angular';

SwiperCore.use([ Autoplay, IonicSlides ]);

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: [ './home.page.scss' ]
})
export class HomePage implements OnInit {

  swiperConfig = {
    slidesPerView: 1,
    spaceBetween: 0,
    autoplay: {
      delay: 1000
    }
  }

  constructor() {}
  ngOnInit() {}
}

home.page.html

<ion-content [fullscreen]="true">
  <swiper direction="horizontal" [config]="swiperConfig">
    <ng-template swiperSlide>Slide 1</ng-template>
    <ng-template swiperSlide>Slide 2</ng-template>
    <ng-template swiperSlide>Slide 3</ng-template>
    <ng-template swiperSlide>Slide 4</ng-template>
  </swiper>
</ion-content>

home.page.scss is empty

Adrien Villalonga
  • 417
  • 3
  • 15

4 Answers4

4

For my Ionic 6 / Angular project, I needed to obtain a reference to the Swiper and then set the "running" property to true for it to actually start moving.

I.e. in your component HTML:

<swiper ... other properties ... #swiperComponent>

In your page.ts obtain the reference to that component:

@ViewChild('swiperComponent') swiperComponent: SwiperComponent;

And then:

ngAfterViewInit() {
   this.swiperComponent.swiperRef.autoplay.running = true;
}

Bit of a hack but it fixed it for me.

Juha Kervinen
  • 332
  • 1
  • 5
2

The simplest way to solve it would be just to set autoplay.running to true, on swiper event, like this:

<swiper #swiper [config]="config" (swiper)="swiper.swiperRef.autoplay.running = true">
MVDeveloper1
  • 208
  • 4
  • 11
1

No way, same problem here. I was to return to old way (deprecated) till this error fixed. Old way -> Using old ionic components and

The old way ->

Component.ts

import SwiperCore, { Autoplay, Keyboard, Pagination } from 'swiper';
import { IonicSlides } from '@ionic/angular';
SwiperCore.use([Autoplay, Keyboard, Pagination,  IonicSlides]);

and into template component.html ->

    <ion-content id="presentation">
    
        <ion-slides [options]="{ autoplay:true} (ionSlideReachEnd)="onReachEnd()">
    
            <ion-slide *ngFor="let item of data" swiperSlide>
            </ion-slide>
        </ion-slides>
     </ion-content>

NOTE: Now, Mar/2023 to use old way you must install old swiper v8 (do not install default v9)

npm install swiper@^8
Juanma Font
  • 346
  • 5
  • 10
0

This work me

<swiper-container [loop]="true" [speed]="1000" [autoplay]="{enable:true,delay:7000}" >
      <swiper-slide>
        <img src="../../../assets/img/qs.jpg" alt="">
      </swiper-slide>
      <swiper-slide><img src="../../../assets/img/App-Maintenance-cost.png" alt=""></swiper-slide>
      <swiper-slide><img src="../../../assets/img/steamuserimages-a.akamaihd.jpeg" alt=""></swiper-slide>
    </swiper-container>
Edward NANDA
  • 39
  • 7