Cant use Swiper and Ionic Angular

I want to use Swiper in Ionic with Angular.

When I paste this to my Component HTML

<swiper >
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://loremflickr.com/g/600/400/paris" alt="img 1"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/600/400/brazil,rio" alt="img 2"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/600/400/paris,girl/all" alt="img 3"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/g/600/400/paris" alt="img 4"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/600/400/brazil,rio" alt="img 5"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/600/400/paris,girl/all" alt="img 6"></div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</swiper>

I get the error:

'swiper' is not a known element:
1. If 'swiper' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

My App Module look like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { SwiperModule } from 'swiper/angular';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { environment } from '../environments/environment';


@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, 
    IonicModule.forRoot(), AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireDatabaseModule, SwiperModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, SwiperModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

You need to import the SwiperModule in the component you are going to use it in, not the app module.

Hello!!

In your Global.css

put this…


/** Swiper use */
@import "swiper/scss";
@import "swiper/scss/navigation";
@import "swiper/scss/pagination";

:slight_smile:

1 Like

I have importet Swiper in the Typescript Component

import { SwiperModule, SwiperComponent } from 'swiper/angular';

Create a stack blitz project replicating your issue and post link here.

I have already importet it in the Global SCSS.

This file is not there:

@import '~swiper/scss';

This file is there:

@import '~@ionic/angular/css/ionic-swiper';

I have only this code:

global.scss:

@import '~swiper/scss';
@import '~@ionic/angular/css/ionic-swiper';

tab1.page.html

  <swiper>
    <ng-template swiperSlide>Slide 1</ng-template>
    <ng-template swiperSlide>Slide 2</ng-template>
    <ng-template swiperSlide>Slide 3</ng-template>
  </swiper>

tab1.page.ts

import { SwiperModule, SwiperComponent } from 'swiper/angular';

and my App Module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { SwiperModule } from 'swiper/angular';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { environment } from '../environments/environment';


@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, 
    IonicModule.forRoot(), AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireDatabaseModule, SwiperModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, SwiperModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

This is not helpful.

I did nothing more.The best idea is to push the repo to Git and you clone it. Then you see my current status

No need – like i said, just create a stackblitz project.

i tried to rebuild it. as i said, there is not much code… Angular (forked) - StackBlitz

npm install swiper

-----------------global.scss-------------------

@import 'swiper/scss';
@import '@ionic/angular/css/ionic-swiper';
@import 'swiper/scss/pagination';

--------------- XXX.module.ts----------------------------

import { SwiperModule } from 'swiper/angular';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    SwiperModule
  ],
  declarations: [HomePage]
})

--------Page----------------------------

import SwiperCore, {Autoplay, Keyboard} from 'swiper'

import {SwiperComponent} from 'swiper/angular'

SwiperCore.use([Autoplay, Keyboard])

For more details you may refer
//Ionic 6 Angular Swiper JS with Autoplay, Effects, Scrolls, Navigation and more - YouTube

Check your version of the swiper…

If is 9.0.0 > is not work…

put this version…

“swiper”: “^8.4.7”,

I have already Swiper 8.4.7 installed…but it won´t be recognized

in xxx.page.ts
you must use swiper like this

import SwiperCore, {
  Navigation,
  Autoplay,
  Pagination,
  FreeMode,
  SwiperOptions,
} from 'swiper';
SwiperCore.use([Navigation, Pagination, Autoplay, FreeMode]);
and all of that pefor @Component

and then

  // === Swiper Options === //
  config: SwiperOptions = {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
      delay: 4000,
      disableOnInteraction: false,
    },
    // autoplay: true,
    pagination: {
      clickable: true,
    },
    navigation: true,
  };
  // === Swiper Options === //

then in HTML


<swiper  [config]="config" >
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src=""></div>
    <div class="swiper-slide"><img src=""></div>
    <div class="swiper-slide"><img src=""></div>
    <div class="swiper-slide"><img src="></div>
    <div class="swiper-slide"><img src=""></div>
    <div class="swiper-slide"><img src=""></div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</swiper>

I had the same problem.

@import ‘swiper/scss’;

@import@ionic/angular/css/ionic-swiper’;

@import ‘swiper/scss/autoplay’;

@import ‘swiper/scss/keyboard’;

@import ‘swiper/scss/pagination’;

@import ‘swiper/scss/scrollbar’;

@import ‘swiper/scss/zoom’;

added this to my global.scss and it worked, i just removed the ~ and it started working fine for me

I don’t know if you already found the docs of swiper v8 for Angular, but I impelemented the way they do, and it worked: Swiper Angular Components

One curiosity: Ionic Team is working on docs to implement swiper v9 with Ionic bug: IonicSwiper & swiper.js 9.0.0 TypeError: mod is not a function · Issue #26722 · ionic-team/ionic-framework · GitHub