AngularSwiper在大小调整时宽度持续增加
- 在swiper的初始化时设置observer: true，这样swiper将会需要做出相应的变化以适应新的容器大小。示例代码如下：
import { Swiper, SwiperOptions } from 'swiper'; const swiperOptions: SwiperOptions = { direction: 'horizontal', slidesPerView: 'auto', spaceBetween: 0, observer: true, }; const swiper = new Swiper('.swiper-container', swiperOptions);
- 对于Angular应用，可以使用ngAfterViewInit钩子在DOM重绘之后初始化Swiper，以便正确计算容器大小。示例代码如下：
import { AfterViewInit, Component, ElementRef } from '@angular/core';
import Swiper from 'swiper';
@Component({
selector: 'app-swiper',
template: ,
})
export class SwiperComponent implements AfterViewInit {
items = ['Slide 1', 'Slide 2', 'Slide 3'];
constructor(private elementRef: ElementRef) {}
ngAfterViewInit(): void {
const swiper = new Swiper(this.elementRef.nativeElement.querySelector('.swiper-container'), {
direction: 'horizontal',
slidesPerView: 'auto',
spaceBetween: 0,
observer: true,
});
}
}
上一篇：AngularSwiperJS在将initialSlide初始化为非零值时，slideChange事件不起作用。
下一篇：AngularSwPush.notificationClicksdoesnotreceivedataobject