(Ionic / Angular) Swiper.js Autoplay is not running

Viewed 43

—— 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

1 Answers

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>
    
Related