How to use the swiper.js with StandAlone components where there is no modules to put the register code?

Ionic Framework
1

Hi:

I created a new ionic 7 angular project and I want to use the swiper.js.

But the tutorial there is in the site (Set Up Swiper.js for Angular Slides [Example] | Ionic) is not compatible with the StandAlone components. It doesn’t have modules in it. Only components.

Do you have a tutorial that it does work with the new ionic?

1 Like
2

Need to add the CUSTOM_ELEMENTS_SCHEMA , which tells Angular that we will be using custom elements.

app.component.spec.ts

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestBed } from '@angular/core/testing';

import { AppComponent } from './app.component';

describe('AppComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

});
3

10x. Will give it a try

4

Found a way to use it in standalone component like that:

npm i swiper@latest

In /global.scss

@import 'swiper/css';

In your page.html

<div class="swiper" #swiperContainer>
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

However i’m bothered to not user the actual swiper-container tag, if someone finds a way I’d like to know

In your standalone page.ts add “implements AfterViewInit” and

  ngAfterViewInit(): void {
    new Swiper(this.swiperContainer.nativeElement, {
      // Swiper options
    });
  }