Swiper next and prev buttons not working

Ionic Framework Ionic Angular
1

Hi!
I installed the swiper. It only works by drag and drop, but the next and previous buttons don’t work. Has anyone encountered this problem? I tried many tips but they didn’t work for me…

2

it could be multiple things. Can you provide some code so we can check it out and try to find what is the problem?

3

In .html

<ion-button (click)="onSlidePrev()"> < </ion-button>
<ion-button (click)="onSlideNext()"> > </ion-button>

In .ts

 @ViewChild('swiper1', { static: false }) swiper1:SwiperComponent;
..
..
  onSlidePrev()
  {
      this.swiper1.swiperRef.slidePrev(1500);
  }
  onSlideNext()
  {
    this.swiper1.swiperRef.slideNext(1000)
  }

Reference
///Ionic 6 Angular Swiper JS with Autoplay, Effects, Scrolls, Navigation and more - YouTube

4

html:

<swiper-container class="mySwiper" navigation="true" pagination="true">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
  </swiper-container>

ts:
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { register } from 'swiper/element/bundle';
register();
@Component({ ...
5

Swiper requires to call register();
I called it at the very beginning of the ts file, right after importing the modules.
But now I tried to call it manually by the button and everything worked as it should.
Where should I call the register() method correctly?

6

According to the Swiper Docs:

When you import Swiper custom elements from node modules, we need to manually register it. It should be done only once and it registers Swiper custom elements globally.

So you should call register() wither on the app.components.ts or main.ts if using standalone components.

7

Alas, this does not help. I also found a way to put register() in ngAfterViewInit in setTimeout - it works, but I think it’s a bad option… Maybe there is another simple swiper? I’ve already dealt with this.)

8

If i pass register() to appcomponent then previous/next don’t work either. At the same time, I can scroll through it by dragging or pagination buttons… I really don’t understand how to make the previous/next buttons work normally

9

When creating the project, I set the blank template. Thus, I display a page with a swiper inside the ion-router-outlet. At the same time, the initialization function in swiper-element-bundle.js is called not once, but several times. If I display the swiper directly in app.component.html, bypassing the ion-router-outlet , the problem goes away and the initialization is called once. How can I get around this?

10

Did you import all CSS files? Might be as simple as that

11

Everything seems to be ok with css. I still think the problem is between the swiper and the ion-router-outlet - it causes the swiper to initialize several times …

12

Having just upgraded from an old version of Swiper to Swiper 9, I see a couple of issues here.

First, in case this is tripping you up: in the .ts source from a previous comment, the ViewChild is declared as a SwiperComponent. If you’re using Swiper 9, SwiperComponent (the Angular type from previous versions) is no longer supported.

I assume based on the HTML & .ts you’ve posted that you are using Swiper 9, in which case the ViewChild declaration should look like this (using the example object/method name from that previous comment):

  @ViewChild('swiper1') swiper1: ElementRef | undefined;

And the navigation methods should look something like this:

  onSlidePrev(): void {
    this.swiper1.nativeElement.swiper.slidePrev(500);
  }
  onSlideNext(): void {
    this.swiper1.nativeElement.swiper.slideNext(500);
  }

(See Swiper Element (WebComponent) for another option that may work)

For this ViewChild to work correctly, make sure the selector is set in your HTML:

<swiper-container #swiper1 class="mySwiper" navigation="true" pagination="true">

Regarding the call to Swiper’s register() method, I put that in the constructor for my bootstrapped component:

  constructor() {
    register();
  }

Hope this helps!

1 Like
13

Thank you for your responsiveness! I decided to do without the swiper for now)