Swiper doesn't work when changing angular route - Swiper 11.0.6 Angular 17 SSR

Question

I am using swiper for my angular 17 SSR application. Swiper is working fine, when I don't use routing or if I refresh the page. But it fails working, when I switch to different route and come back to previous route. May I know how to solve this issue,

Here are angular codes, I have multiple routes, and in each route I will have swiper, Just for example, I have shared one route,

app.component.html

<div class="container">
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link active" routerLink="">Swiper Main</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="swiper-1">Swiper 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="swiper-2">Swiper 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="swiper-3">Swiper 3</a>
    </li>
  </ul>
  <router-outlet></router-outlet>
</div>

app.routes.ts

export const routes: Routes = [
    {
        path: '',
        component: SwiperThumbsVerticalComponent
    },
    {
        path: 'swiper-1',
        component: SwiperThumbsVerticalDup1Component
    },
    {
        path: 'swiper-2',
        component: SwiperThumbsVerticalDup2Component
    },
    {
        path: 'swiper-3',
        component: SwiperThumbsVerticalDup3Component
    },
];

SwiperThumbsVerticalDup1Component.html

    <div>
    <swiper-container style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="mySwiper"
        thumbs-swiper=".mySwiper2" space-between="10" navigation="true">
        <swiper-slide *ngFor="let slide of slides">
            <img [src]="slide.image" />
        </swiper-slide>
    </swiper-container>

    <swiper-container #swiper2 class="mySwiper2" space-between="10" slides-per-view="6" free-mode="true"
        watch-slides-progress="true" init="false">
        <swiper-slide *ngFor="let slide of slides">
            <img [src]="slide.image" />
        </swiper-slide>
    </swiper-container>
</div>

SwiperThumbsVerticalDup1Component.scss:

swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.mySwiper {
  height: 600px;
  width: 100%;
}

.mySwiper2 {
  // defines height and width of thumbs swiper
  height: 100px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  swiper-slide {
    opacity: 0.6; // this set default opacity to all slides
  }
  .swiper-slide-thumb-active {
    opacity: 1; // this reset the opacity one for the active slide
  }
}

SwiperThumbsVerticalDup1Component.ts

import { CommonModule } from '@angular/common';
import {
  Component,
  OnInit,
  CUSTOM_ELEMENTS_SCHEMA,
  ViewChild,
  ElementRef,
  AfterViewInit,
} from '@angular/core';

@Component({
  selector: 'app-swiper-thumbs-vertical-dup-1',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './swiper-thumbs-vertical-dup-1.component.html',
  styleUrl: './swiper-thumbs-vertical-dup-1.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SwiperThumbsVerticalDup1Component implements OnInit, AfterViewInit {
  @ViewChild('swiper2') swiper2!: ElementRef<any>;

  slides = [
    { image: 'https://swiperjs.com/demos/images/nature-1.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-2.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-3.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-4.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-5.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-6.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-7.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-8.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-10.jpg' },
  ];
  constructor() {}

  ngOnInit() {}

  ngAfterViewInit() {
    const swiperParams = {
      breakpoints: {
        100: {
          slidesPerView: 3,
        },
        640: {
          slidesPerView: 5,
        },
        1024: {
          slidesPerView: 6,
        },
      },
    };

    // now we need to assign all parameters to Swiper element
    Object.assign(this.swiper2.nativeElement, swiperParams);
    this.swiper2.nativeElement.initialize();
  }
}