角度 17 的滑动器
虽然在另一个组件中工作,但在产品卡内不起作用
产品页面.component.html:
<div class="card-img-container overflow-auto">
<div class="swiper-container myProductSwiper" #swiperContainer>
<div class="swiper-wrapper">
<!-- Iterate over each image of the product -->
<ng-container *ngFor="let image of product.images">
<div class="swiper-slide">
<div class="product-item">
<img [src]="image" alt="Product Image">
</div>
</div>
</ng-container>
</div>
<!-- Pagination and Navigation outside the ngFor loop -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
产品页面.component.ts:
import { Navigation, Pagination } from 'swiper/modules';
import Swiper from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
export class ProductPageComponent implements OnInit ,AfterViewInit {
@ViewChild('swiperContainer') swiperContainer!: ElementRef;
swiper: Swiper | undefined;
products: Product[] = [];
isDealerLoggedIn: boolean = false;
faArrowCircleLeft = faArrowCircleLeft;
constructor(
private productService: ProductService,
private productImageService: ProductImageService,
private route: ActivatedRoute,
private router: Router, // Inject Router service
private dialog: MatDialog,
private dealerLoginService: DealerLoginService, // Inject DealerLoginService
) { Swiper.use([Navigation, Pagination]);
}
ngAfterViewInit(): void {
console.log('ngAfterViewInit called ');
this.initializeSwiper();
}
private initializeSwiper(): void {
if (this.swiperContainer && this.swiperContainer.nativeElement) {
this.swiper = new Swiper(this.swiperContainer.nativeElement, {
slidesPerView: 1,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
keyboard: {
enabled: true,
onlyInViewport: true,
},
});
} else {
console.error('Swiper container not found or not initialized.');
}
}
刷卡器应位于卡片 img 容器内。
是的,我添加了 registerSwiperElements();在我的 main.ts 中并添加了模式:[CUSTOM_ELEMENTS_SCHEMA],
swiper-element
,这意味着我们有不同的初始化方式,你可以尝试下面的代码吗?
<swiper-container
slides-per-view="1"
speed="500"
loop="true"
navigation="true"
pagination="true"
#swiper
scrollbar="true"
>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
<swiper-slide><img src="https://placehold.co/600x400" /></swiper-slide>
</swiper-container>
import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'app-swiper',
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
templateUrl: './swiper.component.html',
})
export class SwiperComponent implements OnInit {
constructor() {}
ngOnInit() {}
ngAfterViewInit() {}
}