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
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();
});
});
Selorb
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
});
}