如果Angular swiper在使用时没有显示,可以尝试以下解决步骤:
npm install swiper --save npm install angular-swiper --save
"styles": [ "src/styles.css", "node_modules/swiper/css/swiper.css" ]
import { Component, OnInit } from '@angular/core'; import { SwiperOptions } from 'swiper';
@Component({ selector: 'app-slider', templateUrl: './slider.component.html', styleUrls: ['./slider.component.css'] }) export class SliderComponent implements OnInit {
constructor() { }
ngOnInit() { }
config: SwiperOptions = { pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, loop: true }; }
在HTML模板中使用swiper组件: