swiper插件在angular5中的使用

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>