'el' property in Swiper Config not rendering pagination buttons properly - Ionic Angular x Swiper.js

Ionic Framework Ionic Angular
1

Hi, I managed to make Swiper work with Ionic Angular along with using configs. But, I wanted to try putting the pagination buttons on a different element below the swiper-container.

On a normal angular project its working but it seems to be overridden on an Ionic Angular project.

Screenshot 2024-05-09 210850
Screenshot 2024-05-09 2108501471×848 43.3 KB

image

Here are the codes:
home.page.html

<ion-content [fullscreen]="true">
  <swiper-container swiperElement init="false" [config]="config">
    <swiper-slide *ngFor="let i of [1, 2, 3, 4, 5, 6, 7, 8]"
      ><img src="https://placehold.co/600x400"
    /></swiper-slide>
  </swiper-container>
  <ion-content>
    <div class="test"></div>
  </ion-content>
</ion-content>

home.page.ts:

import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
} from '@ionic/angular/standalone';
import { SwiperDirective } from '../swiper.directive';
import { SwiperOptions } from 'swiper/types';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    SwiperDirective,
    CommonModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class HomePage {
  constructor() {}
  config: SwiperOptions = {
    navigation: true,
    pagination: {
      el: '.test',
    },
  };
}