I am attempting to implement a carousel in Angular using Swiper ().
An error message is appearing:
Error: node_modules/swiper/angular/angular/src/swiper-events.d.ts:3:50 - error TS2344: Type 'SwiperEvents[Property]' does not meet the constraint '(...args: any) => any'. Type '((swiper: Swiper) => void) | ((swiper: Swiper) => void) | ...more... | undefined' cannot be assigned to type '(...args: any) => any'. Type 'undefined' cannot be assigned to type '(...args: any) => any'.
I have attempted the following solutions:
- Uninstalling and reinstalling Swiper with npm i swiper
- Uninstalling Swiper and reinstalling it with npm i @types/swiper
Here is my code:
angular.json
"styles": [
"src/myTheme.scss",
"src/styles.css",
"node_modules/swiper/swiper-bundle.min.css"
],
"scripts": ["node_modules/swiper/swiper-bundle.min.js"]
},
The shared module
import { SwiperModule } from 'swiper/angular';
exports: [
SwiperModule,
other modules
]
The component:
config: SwiperOptions = {
slidesPerView: 3,
spaceBetween: 50,
navigation: true,
pagination: { clickable: true },
scrollbar: { draggable: true },
};
//in the methods
onSwiper([swiper]) {
console.log(swiper);
}
onSlideChange() {
console.log('slide change');
}
The HTML
<swiper
[config]="config"
(swiper)="onSwiper($event)"
(slideChange)="onSlideChange()"
>
<ng-template swiperSlide>Slide 1</ng-template>
<ng-template swiperSlide>Slide 2</ng-template>
<ng-template swiperSlide>Slide 3</ng-template>
<ng-template swiperSlide>Slide 4</ng-template>
<ng-template swiperSlide>Slide 5</ng-template>
<ng-template swiperSlide>Slide 6</ng-template>
</swiper>
Does anyone have an idea of what could be causing this issue? Thank you