# Swiper Angular Components组件

# 安装

Swiper Angular插件仅作为主Swiper库的一部分通过NPM安装：

npm install swiper

# 模块导入

import { SwiperModule } from 'swiper/angular';

@NgModule({
imports: [SwiperModule],
})
export class YourAppModule {}

# 样式

Swiper包含不同的css,less和scss样式:

swiper/css - 只包含Swiper核心样式
swiper/css/bundle - 所有Swiper模块样式(比如导航，分页样式等.)

模块样式 (如果已经导入了bundle样式，则不需要此选项):

swiper/css/a11y - A11y模块样式
swiper/css/autoplay - Autoplay自动播放模块样式
swiper/css/controller - Controller控制模块样式
swiper/css/effect-cards - Cards Effect卡片特效模块样式
swiper/css/effect-coverflow - Coverflow Effect覆盖流特效模块样式
swiper/css/effect-creative - Creative Effect创意特效模块样式
swiper/css/effect-cube - Cube Effect立体特效模块样式
swiper/css/effect-fade - Fade Effect渐变模块样式
swiper/css/effect-flip - Flip Effect翻转模块样式
swiper/css/free-mode - Free自由模块样式
swiper/css/grid - Grid网格模块样式
swiper/css/hash-navigation - Hash Navigation哈斯导航模块样式
swiper/css/history - History module历史模块样式
swiper/css/keyboard - Keyboard键盘模块样式
swiper/css/lazy - Lazy懒加载模块样式
swiper/css/manipulation - Manipulation操作模块样式
swiper/css/mousewheel - Mousewheel鼠标滚动样式
swiper/css/navigation - Navigation导航模块样式
swiper/css/pagination - Pagination分页模块样式
swiper/css/parallax - Parallax视差模块样式
swiper/css/scrollbar - Scrollbar滚动条样式
swiper/css/thumbs - Thumbs缩略图模式
swiper/css/virtual - Virtual虚拟模块样式
swiper/css/zoom - Zoom放大模块样式

对于Less的样式，将css替换，例如：

import 'swiper/less';
import 'swiper/less/navigation';
import 'swiper/less/pagination';

对于SCSS的样式，将css替换，例如：

import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';

# 用法

参数可以作为参数或通过[config]传递到<swiper>

import { Component } from '@angular/core';

// import Swiper core and required modules
import SwiperCore from 'swiper';

@Component({
  selector: 'app-swiper-example',
  template: `
    <swiper
      [slidesPerView]="3"
      [spaceBetween]="50"
      (swiper)="onSwiper($event)"
      (slideChange)="onSlideChange()"
    >
      <ng-template swiperSlide>Slide 1</ng-template>
      <ng-template swiperSlide>Slide 2</ng-template>
      <ng-template swiperSlide>Slide 3</ng-template>
    </swiper>
  `,
})
export class AppComponent {
  onSwiper([swiper]) {
    console.log(swiper);
  }
  onSlideChange() {
    console.log('slide change');
  }
}

使用 [config]:

import { Component } from '@angular/core';

// import Swiper core and required modules
import SwiperCore, { SwiperOptions } from 'swiper';

@Component({
  selector: 'app-swiper-example',
  template: `
    <swiper
      [config]="config"
      (swiper)="onSwiper($event)"
      (slideChange)="onSlideChange()"
    >
      <ng-template swiperSlide>Slide 1</ng-template>
      <ng-template swiperSlide>Slide 2</ng-template>
      <ng-template swiperSlide>Slide 3</ng-template>
      <ng-template swiperSlide>Slide 4</ng-template>
      <ng-template swiperSlide>Slide 5</ng-template>
      <ng-template swiperSlide>Slide 6</ng-template>
    </swiper>
  `,
})
export class AppComponent {
  config: SwiperOptions = {
    slidesPerView: 3,
    spaceBetween: 50,
    navigation: true,
    pagination: { clickable: true },
    scrollbar: { draggable: true },
  };
  onSwiper([swiper]) {
    console.log(swiper);
  }
  onSlideChange() {
    console.log('slide change');
  }
}

注意

默认情况下，Swiper Angular使用Swiper的核心版本（没有任何附加模块）。如果要使用导航、分页和其他模块，必须先安装它们。以下是其他模块导入列表：

Virtual - 虚拟幻灯片模块
Keyboard - 键盘控制模块
Mousewheel - 鼠标滚动模块
Navigation - 导航模块
Pagination - 分布模块
Scrollbar - 滚动条模块
Parallax - 视差模块
FreeMode - 自由模式模块
Grid - 网格模块
Manipulation - 幻灯片操作模块（仅适用于核心版本）
Zoom - 放大模块
Lazy - 懒加载模块
Controller - 控制模块
A11y - 可达性控制模块
History - 历史导航模块
HashNavigation - Hash导航模块
Autoplay - 自动播放模块
EffectFade - 渐变特效模块
EffectCube - 立体特效模块
EffectFlip - 轻弹特效模块
EffectCoverflow - Coverflow Effect module
EffectCards - 卡片特效模块
EffectCreative - 创新特效模块
Thumbs - 缩略图模块

import { Component } from '@angular/core';

// import Swiper core and required modules
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

@Component({
  selector: 'app-swiper-example',
  template: `
    <swiper
      [slidesPerView]="3"
      [spaceBetween]="50"
      (swiper)="onSwiper($event)"
      (slideChange)="onSlideChange()"
      [navigation]="true"
      [pagination]="{ clickable: true }"
      [scrollbar]="{ draggable: true }"
    >
      <ng-template swiperSlide>Slide 1</ng-template>
      <ng-template swiperSlide>Slide 2</ng-template>
      <ng-template swiperSlide>Slide 3</ng-template>
      <ng-template swiperSlide>Slide 4</ng-template>
      <ng-template swiperSlide>Slide 5</ng-template>
      <ng-template swiperSlide>Slide 6</ng-template>
    </swiper>
  `,
})
export class AppComponent {
  onSwiper([swiper]) {
    console.log(swiper);
  }
  onSlideChange() {
    console.log('slide change');
  }
}

# 访问swiper引用

import { Component } from '@angular/core';
import { SwiperComponent } from "swiper/angular";
// import Swiper core and required modules
import SwiperCore, { Swiper, Virtual } from 'swiper';

// install Swiper modules
SwiperCore.use([Virtual]);

@Component({
  selector: 'app-swiper-fade-example',
  template: `
    <swiper #swiper [virtual]="true">
      <ng-template swiperSlide>Slide 1</ng-template>
      <ng-template swiperSlide>Slide 2</ng-template>
      <ng-template swiperSlide>Slide 3</ng-template>
      <ng-template swiperSlide>Slide 4</ng-template>
      <ng-template swiperSlide>Slide 5</ng-template>
      <ng-template swiperSlide>Slide 6</ng-template>
      <ng-template swiperSlide>Slide 7</ng-template>
    </swiper>
    <button (click)="slideNext()">Next slide</button>
    <button (click)="slidePrev()">Prev slide</button>
  `,
})
export class AppComponent {
  @ViewChild('swiper', { static: false }) swiper?: SwiperComponent;
  slideNext(){
    this.swiper.swiperRef.slideNext(100);
  }
  slidePrev(){
    this.swiper.swiperRef.slidePrev(100);
  }
}

# SwiperComponent props

Swiper角组件将所有Swiper参数作为组件道具接收

# Swiper events事件

Swiper组件支持所有Swiper事件，包括尽快返回Swiper实例的附加Swiper事件。例如：使用EventsParams进行键入。参数始终作为数组返回，即使只传递了一个参数。

import { Component } from '@angular/core';

import { EventsParams } from 'swiper/angular';

@Component({
    selector: 'app-swiper-example',
    template: `
    <swiper
      (swiper)="onSwiper($event)"
      (beforeTransitionStart)="onBeforeTransitionStart()"
    >
      <ng-template swiperSlide>Slide 1</ng-template>
      <ng-template swiperSlide>Slide 2</ng-template>
      <ng-template swiperSlide>Slide 3</ng-template>
    </swiper>
  `,
})
export class AppComponent {
    onSwiper(params: EventsParams['swiper']) {
        const [swiper] = params;
        console.log(swiper);
    }
    beforeTransitionStart(params: EventsParams['beforeSlideChangeStart']) {
        const [swiper, speed, internal] = params;
        console.log('beforeTransitionStart, speed: ' + speed);
    }
}

# SwiperSlideDirective props

Prop	类型	默认	描述
virtualIndex	number		实际滑动指数。需要为虚拟幻灯片设置

<swiper>
  <ng-template swiperSlide>
    <div>Slide</div>
  </ng-template>

  <ng-template swiperSlide *ngFor="let slide of slides">
    <div>Slide</div>
  </ng-template>
</swiper>

# SwiperSlideDirective变量

SwiperSlideDirective导出以下变量：

isActive - 当前幻灯片处于活动状态时为true
isPrev - 当前幻灯片是活动的上一张幻灯片时为true
isNext - 当前幻灯片是活动的下一张幻灯片时为真
isVisible - 当前幻灯片可见时为true（必须启用watchSlidesProgress Swiper参数）
isDuplicate - 例如，当当前幻灯片为重复幻灯片时（启用循环模式时），为true:

比如:

<swiper>
  <ng-template swiperSlide let-data>
    <div>Current slide is {{ data.isActive ? 'active' : 'not active' }}</div>
  </ng-template>
</swiper>

# Slots插槽

Swiper Vue。js组件使用“插槽”进行内容分发。有4个插槽可用

container-start - 元素将添加到swiper-container容器的开头
container-end (默认) - 元素将添加到swiper-container容器的尾部
wrapper-start - 元素将添加到swiper-wrapper容器的开头
wrapper-end - 元素将添加到swiper-wrapper容器的尾部

比如：

<swiper>
  <ng-template swiperSlide>Slide 1</ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>
  <span slot="container-start">Container Start</span>
  <span slot="container-end">Container End</span>
  <span slot="wrapper-start">Wrapper Start</span>
  <span slot="wrapper-end">Wrapper End</span>
</swiper>

将被渲染成：

<div class="swiper">
  <span slot="container-start">Container Start</span>
  <div class="swiper-wrapper">
    <span slot="wrapper-start">Wrapper Start</span>
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <span slot="wrapper-end">Wrapper End</span>
  </div>
  <span slot="container-end">Container End</span>
</div>

# Virtual Slides

此处的虚拟幻灯片渲染完全由Angular处理，除了设置[Virtual]＝“true”之外，无需任何其他操作：

import { Component } from '@angular/core';

// import Swiper core and required modules
import SwiperCore, { Virtual } from 'swiper';

// install Swiper modules
SwiperCore.use([Virtual]);

@Component({
  selector: 'app-swiper-virtual-example',
  template: ` <swiper [slidesPerView]="3" [spaceBetween]="50" [virtual]="true">
    <ng-container *ngFor="let slide of slides; index as i">
      <ng-template swiperSlide>Slide {{ slide }}</ng-template>
    </ng-container>
  </swiper>`,
})
export class AppComponent {
  // Create array with 1000 slides
  slides = Array.from({ length: 1000 }).map(
    (el, index) => `Slide ${index + 1}`
  );
}

# Effects特效

以下效果可用：

Fade
Cube
Coverflow
Flip
Cards
Creative

要使用效果，必须先导入并安装它们（与所有其他模块一样）（示例）：

import SwiperCore, { EffectFade } from 'swiper';

SwiperCore.use([EffectFade]);

# Effect 特效例子

import { Component } from '@angular/core';

// import Swiper core and required modules
import SwiperCore, { EffectFade, Swiper } from 'swiper';

// install Swiper modules
SwiperCore.use([EffectFade]);

@Component({
  selector: 'app-swiper-fade-example',
  template: `
    <swiper effect="fade">
      <ng-template swiperSlide>Slide 1</ng-template>
      <ng-template swiperSlide>Slide 2</ng-template>
      <ng-template swiperSlide>Slide 3</ng-template>
    </swiper>
  `,
})
export class AppComponent {}

← Swiper React