3.关于angular5中swiper插件的使用
npm link npm link ngx-swiper-wrapper
安装
npm install ngx-swiper-wrapper --save
在主模块中引入(例如主模块是app.module.ts)那么就在app.module.ts这个文件中:
import { SwiperModule } from 'ngx-swiper-wrapper';
import { SWIPER_CONFIG } from 'ngx-swiper-wrapper';
import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
direction: 'horizontal',
slidesPerView: 'auto'
};
@NgModule({
...
imports: [
...
SwiperModule
],
providers: [
{
provide: SWIPER_CONFIG,
useValue: DEFAULT_SWIPER_CONFIG
}
]
})
在其他组件中用时需要引入的东西
import { Component, OnInit, ViewChild } from '@angular/core';
import {
SwiperConfigInterface,
SwiperCoverflowEffectInterface,
SwiperComponent,
SwiperNavigationInterface
} from 'ngx-swiper-wrapper';
// 3D 切换效果参数设置
const coverflowEffectConfig: SwiperCoverflowEffectInterface = {
rotate: 0,
stretch: 200,
depth: 200,
modifier: 1,
slideShadows: false
};
// 前进后退按钮配置
const navigationConfig: SwiperNavigationInterface = {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
hideOnClick: true
// disabledClass?: string;
// hiddenClass?: string;
};
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
// swiper config
config: SwiperConfigInterface;
ngOnInit() {
this.config = {
direction: 'horizontal',
// 开启鼠标的抓手状态
grabCursor: true,
// 被选中的滑块居中,默认居左
centeredSlides: true,
loop: true,
slidesPerView: 'auto',
// loopedSlides: 8,
autoplay: true,
speed: 1000,
// 切换效果为 coverflow
// effect: 'coverflow',
// coverflow 配置
coverflowEffect: coverflowEffectConfig,
// 前进后退按钮设置
navigation: navigationConfig
};
}
}
具体的config设置参数请参照:http://www.swiper.com.cn/api/index.html
如果没有写样式可以在当前组件中引入默认的样式:
@import '~swiper/dist/css/swiper.min.css';
html界面是这样子的:
<div class="swiper-container" [swiper]='config'>
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>