I'm actually migrating to Angular 15 and saw that swiper 9 was out.
It's written that a simple npm i swiper
and that it should work, since
Custom elements are supported in all major browser and by almost every framework.
But I'm a bit lost since I cannot import it in the module anymore
Does somebody knows how to use the latest v9.0.0^
swiper version with angular ?
In AppModule add:
import {register} from 'swiper/element/bundle';
register();
Create a Directive
import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';
import {SwiperOptions} from "swiper";
@Directive({
selector: '[fmSwiper]',
standalone: true,
})
export class SwiperDirective implements AfterViewInit {
private readonly swiperElement: HTMLElement;
@Input('config')
config?: SwiperOptions;
constructor(private el: ElementRef<HTMLElement>) {
this.swiperElement = el.nativeElement;
}
ngAfterViewInit() {
Object.assign(this.el.nativeElement, this.config);
// @ts-ignore
this.el.nativeElement.initialize();
}
}
In your Component ts File add
schemas: [CUSTOM_ELEMENTS_SCHEMA]
Set your Swiper configuration.
Example:
import {Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation} from '@angular/core';
import {CommonModule} from '@angular/common';
import {MainHeadingComponent} from "../main-heading/main-heading.component";
import {StreamItemComponent} from "./stream-item/stream-item.component";
import {A11y, Mousewheel, Navigation, Pagination, SwiperOptions} from 'swiper';
import {SwiperDirective} from "../../directives/swiper.directive";
@Component({
selector: 'fm-streams-swiper',
standalone: true,
encapsulation: ViewEncapsulation.None,
imports: [
CommonModule,
MainHeadingComponent,
StreamItemComponent,
SwiperDirective
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
templateUrl: './streams-swiper.component.html',
})
export class StreamsSwiperComponent {
sliders: string[] = [
'Test 1',
'Test 2',
'Test 3',
'Test 4',
'Test 5',
'Test 6',
'Test 7',
'Test 8',
'Test 9',
]
public config: SwiperOptions = {
modules: [Navigation, Pagination, A11y, Mousewheel],
autoHeight: true,
spaceBetween: 20,
navigation: false,
pagination: {clickable: true, dynamicBullets: true},
slidesPerView: 1,
centeredSlides: true,
breakpoints: {
400: {
slidesPerView: "auto",
centeredSlides: false
},
}
}
}
And the HMTL File:
<swiper-container fmSwiper [config]="config" init="false" class="w-full">
<swiper-slide class="w-[310px] sm:w-[450px] pb-6"
*ngFor="let slider of sliders">
<fm-stream-item></fm-stream-item>
</swiper-slide>
</swiper-container>
This is my solution for the moment. Happy to hear better ways to implement the new Version of Swiper in Angular :-)