Cant using swiper.js in the new version in Ionic with angular

Ionic Framework Ionic Angular
1

Hey guys,

I have a problem using swiper in ionic v7.1.3. I’m following the suggestions in the guide Migrating from ion-slides to Swiper.js in the documentation, but I can’t solve my problem.

I want to create custom navigation buttons that interact with the swiper-container, so I can’t insert the behavior inside the buttons using a call to swiper.slideNext(), there is no error when I call it, but nothing happens.

Here is my code:

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { HeaderType } from 'src/app/Interfaces/Header';
import Swiper from 'swiper';

@Component({
  selector: 'app-atividades-execucao',
  templateUrl: './atividades-execucao.page.html',
  styleUrls: ['./atividades-execucao.page.scss'],
})
export class AtividadesExecucaoPage implements OnInit {
  readonly headerType : HeaderType = HeaderType.childPage;
  @ViewChild('swiper') swiperRef: ElementRef | undefined;
  swiper?: Swiper;

  constructor() { }

  ngOnInit() {}

  ngAfterViewInit(){}

  swiperReady(){
    this.swiper = this.swiperRef?.nativeElement.swiper;
  }

  swiperSlideChanged(e: any) {
    console.log('changed: ', e);
  }
 
  goNext() {
    if (this.swiper) {
      this.swiper.slideNext(200);
      return
    }
  }
 
  goPrev() {
    if (this.swiper) {
      console.log('prev')
      this.swiper.slidePrev(200);
      return
    }
    console.log('Não entrou no if')
  }
}

And, the template:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title> Ionic Swiper </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="goPrev()">
        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
      </ion-button>
      <ion-button (click)="goNext()">
        <ion-icon slot="icon-only" name="arrow-forward"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <swiper-container
    #swiper
    (swiperafterinit)="swiperReady()"
    (swiperslidechange)="swiperSlideChanged($event)"
    [pagination]="true"
    [navigation]="true">
    <swiper-slide>
      <ion-img [src]="'../../../assets/images/pessoas-idade-robusta-caminhando-parque.png'"></ion-img>
    </swiper-slide>
    <swiper-slide>
      <ion-img [src]="'../../../assets/images/pessoas-idade-robusta-caminhando-parque.png'"></ion-img>
    </swiper-slide>
    <swiper-slide>
      <ion-img [src]="'../../../assets/images/pessoas-idade-robusta-caminhando-parque.png'"></ion-img>
    </swiper-slide>
  </swiper-container>
</ion-content>

Please, i need a help about this issue. Thank you.

2

For angular Follow Swiper element documentation
In html

<swiper-container #swiperEx
In .ts file take reference of swiper using viewchild

@ViewChild("swiperEx") swiperEx ?: ElementRef<{ swiper: Swiper }>

Then for navigation

 slideNext()
  {
    this.swiperEx?.nativeElement.swiper.slideNext(1000)
  }
  slidePrev()
  {
    this.swiperEx?.nativeElement.swiper.slidePrev(1000)
  }

for demo refer this

1 Like