Cant use Swiper and Ionic Angular

mark-baumann · February 15, 2023, 5:52pm

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 {}

Hills90210 · February 15, 2023, 8:15pm

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

starlley · February 15, 2023, 8:16pm

Hello!!

In your Global.css

put this…


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

mark-baumann · February 15, 2023, 8:52pm

I have importet Swiper in the Typescript Component

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

Hills90210 · February 15, 2023, 9:03pm

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

mark-baumann · February 15, 2023, 9:08pm

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';

mark-baumann · February 15, 2023, 9:26pm

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 {}

Hills90210 · February 16, 2023, 2:26pm

This is not helpful.

mark-baumann · February 16, 2023, 2:31pm

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

Hills90210 · February 16, 2023, 2:43pm

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

mark-baumann · February 16, 2023, 4:28pm

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

techbinomial · February 16, 2023, 6:00pm

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

starlley · February 16, 2023, 9:24pm

Check your version of the swiper…

If is 9.0.0 > is not work…

put this version…

“swiper”: “^8.4.7”,

mark-baumann · February 16, 2023, 10:12pm

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

MikeAwad · February 17, 2023, 4:46pm

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>

RamanaS25 · February 17, 2023, 4:56pm

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

FranciskoNeves0 · February 22, 2023, 11:42pm

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

FranciskoNeves0 · February 22, 2023, 11:45pm

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

Topic		Replies	Views
Cant using swiper.js in the new version in Ionic with angular Ionic Angular	1	1385	January 2, 2024
Swiper-container is not know element Ionic Framework	8	4907	May 9, 2023
Swiper issue - "Unknown html tag swiper-container" Ionic Angular	8	1876	January 30, 2024
How to use the swiper.js with StandAlone components where there is no modules to put the register code? Ionic Framework	3	2726	January 26, 2024
'el' property in Swiper Config not rendering pagination buttons properly - Ionic Angular x Swiper.js Ionic Angular	0	137	May 9, 2024

Cant use Swiper and Ionic Angular

Related topics