我正在尝试在我的 Angular 8 应用程序中实现 Swiper:https://swiperjs.com/get-started/ .
我在我的 Assets 文件夹中创建了一个 javascript 文件并将其包含到我的 angular.json
中。
此外,我还在我的 app.module.ts
中包含了 Swiper 并运行了命令
npm 安装@types/swiper
。
但是,我收到错误:
[ts] 模块“”../node_modules/@types/swiper/index 没有导出成员“Swiper”
当它清楚地发生时。我不确定哪里出错了。
card-swipe.component.ts
import { SwiperModule, SwiperConfigInterface } from 'ngx-swiper-wrapper';
@Component({
selector: 'app-card-swipe',
templateUrl: './card-swipe.component.html',
styleUrls: ['./card-swipe.component.css']
})
export class CardSwipeComponent implements OnInit {
constructor() { }
something;
index;
config: SwiperConfigInterface = {
a11y: true,
direction: 'horizontal',
slidesPerView: 3,
slideToClickedSlide: true,
mousewheel: true,
scrollbar: false,
watchSlidesProgress: true,
navigation: true,
keyboard: true,
pagination: false,
centeredSlides: true,
loop: true,
roundLengths: true,
slidesOffsetBefore: 100,
slidesOffsetAfter: 100,
spaceBetween: 50,
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 1
}
}
};
ngOnInit() {}
}
card-swipe.component.html
<p>Hi this works</p>
<!-- Slider main container -->
<swiper fxFlex="auto" [config]="config" (indexChange)="onIndexChange($event)">
<div *ngFor="let step of something; let index = index" class="swiper-slide cursor-pointer">
<div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
<p>hi</p>
<h1>hello</h1>
</div>
</div>
</swiper>
最佳答案
我们在 Angular 应用程序中使用 Swiper。
我们如何整合它: 有一个专门用于 Angular 的 npm 包: https://www.npmjs.com/package/ngx-swiper-wrapper
所以你基本上只需要安装这个包:
npm i ngx-swiper-wrapper
然后,导入模块(我们已将其放入我们的 SharedModule
并导出它,以便可以从任何地方访问它:
imports: [
// more imports here
SwiperModule
]
然后你可以像这样在你的组件中使用它:
<swiper fxFlex="auto" [config]="config" (indexChange)="onIndexChange($event)">
<div *ngFor="let step of something; let index = index" class="swiper-slide cursor-pointer">
<div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
<!-- Your content goes here -->
</div>
</div>
</swiper>
作为一个配置,你可以有这样的东西:
config: SwiperConfigInterface = {
a11y: true,
direction: 'horizontal',
slidesPerView: 3,
slideToClickedSlide: true,
mousewheel: true,
scrollbar: false,
watchSlidesProgress: true,
navigation: true,
keyboard: true,
pagination: false,
centeredSlides: true,
loop: true,
roundLengths: true,
slidesOffsetBefore: 100,
slidesOffsetAfter: 100,
spaceBetween: 50,
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 1
}
}
};
无需在您的 angular.json
文件中包含任何样式。它们都随您导入的模块一起提供。
关于angular - 在 Angular 8 中实现 Swiper,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59498661/