- 确保你在 HTML 文件中正确地使用了 Swiper 分页,例如:
Slide 1
Slide 2
Slide 3
- 在组件文件中引入 ngx-swiper-wrapper 组件:
import { SwiperOptions } from 'swiper';
// ...
export class MyComponent {
public config: SwiperOptions = {
// Swiper 分页选项
pagination: { el: '.swiper-pagination', clickable: true }
};
}
- 在 HTML 文件中使用 ngx-swiper-wrapper 组件:
{{ item }}
- 在组件文件中初始化 Swiper:
import { ViewChild, AfterViewInit } from '@angular/core';
import { SwiperComponent } from 'ngx-swiper-wrapper';
// ...
export class MyComponent implements AfterViewInit {
// 获取 ViewChild 实例
@ViewChild(SwiperComponent) public componentRef?: SwiperComponent;
// ...
public ngAfterViewInit(): void {
// 等待渲染完成后初始化 Swiper
setTimeout(() => {
if (this.componentRef) {
this.componentRef.swiper().update();
}
});
}
}