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
    };
  }
}
 

如果沒有寫樣式可以在當前元件中引入預設的樣式：

@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>