Swiper Angular Components

Getting started

Install Swiper

Swiper Angular plugin is available only via NPM as a part of the main Swiper library:

npm i swiper@6

Import SwiperModule module

import { SwiperModule } from 'swiper/angular';

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

Add styles

Import Swipers CSS in styles.scss

@import '~swiper/swiper-bundle';

Or you can import only modules that you need Swiper package contains different sets of CSS, Less and SCSS styles:

CSS Styles

CSS styles available only for bundle version:

swiper-bundle.css - all Swiper styles including all modules styles (like Navigation, Pagination, etc.)
swiper-bundle.min.css - same as previous but minified

Less Styles

Less styles are separate styles for core version and modules:

swiper.less - only core Swiper styles
components/a11y/a11y.less - styles required for A11y module
components/controller/controller.less - styles required for Controller module
components/effect-coverflow/effect-coverflow.less - styles required for Coverflow Effect module
components/effect-cube/effect-cube.less - styles required for Cube Effect module
components/effect-fade/effect-fade.less - styles required for Fade Effect module
components/effect-flip/effect-flip.less - styles required for Flip Effect module
components/lazy/lazy.less - styles required for Lazy module
components/navigation/navigation.less - styles required for Navigation module
components/pagination/pagination.less - styles required for Pagination module
components/scrollbar/scrollbar.less - styles required for Scrollbar module
components/thumbs/thumbs.less - styles required for Thumbs module
components/zoom/zoom.less - styles required for Zoom module

SCSS Styles

SCSS styles are also separate styles for core version and modules:

swiper.scss - only core Swiper styles
components/a11y/a11y.scss - styles required for A11y module
components/controller/controller.scss - styles required for Controller module
components/effect-coverflow/effect-coverflow.scss - styles required for Coverflow Effect module
components/effect-cube/effect-cube.scss - styles required for Cube Effect module
components/effect-fade/effect-fade.scss - styles required for Fade Effect module
components/effect-flip/effect-flip.scss - styles required for Flip Effect module
components/lazy/lazy.scss - styles required for Lazy module
components/navigation/navigation.scss - styles required for Navigation module
components/pagination/pagination.scss - styles required for Pagination module
components/scrollbar/scrollbar.scss - styles required for Scrollbar module
components/thumbs/thumbs.scss - styles required for Thumbs module
components/zoom/zoom.scss - styles required for Zoom module

Usage

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

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

@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');
  }
}

By default Swiper Angular uses core version of Swiper (without any additional modules). If you want to use Navigation, Pagination and other modules, you have to install them first. Here is the list of additional modules imports:

Virtual - Virtual Slides module
Keyboard - Keyboard Control module
Mousewheel - Mousewheel Control module
Navigation - Navigation module
Pagination - Pagination module
Scrollbar - Scrollbar module
Parallax - Parallax module
Zoom - Zoom module
Lazy - Lazy module
Controller - Controller module
A11y - Accessibility module
History - History Navigation module
HashNavigation - Hash Navigation module
Autoplay - Autoplay module
EffectFade - Fade Effect module
EffectCube - Cube Effect module
EffectFlip - Flip Effect module
EffectCoverflow - Coverflow Effect module
Thumbs - Thumbs module

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

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

// 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');
  }
}

Edit on Stackblitz;

SwiperComponent props

Swiper Angular component receive all Swiper parameters as component props

SwiperComponent events

Swiper component supports all Swiper events, including additional swiper event that returns swiper instance as soon as posible. For example:

Note that Swiper Angular component all events emits outside of NgZone for better perfomance. Dont forget to use `ngzone.run` or ChagngeDetector if you need to change view (e.g slides) in event handlers (e.g `slideChange`).

<swiper (swiper)="..." (slideChange)="..." (reachEnd)="..." ...></swiper>

SwiperSlideDirective props

Prop	Type	Default	Description
`virtualIndex`	`number`		Actual swiper slide index. Required to be set for virtual slides

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

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

SwiperSlideDirective variables

SwiperSlideDirective exports the following variables:

isActive - true when current slide is active
isPrev - true when current slide is the previous from active
isNext - true when current slide is the next from active
isVisible - true when current slide is visible (watchSlidesVisibility Swiper parameter must be enabled)
isDuplicate - true when current slide is a duplicate slide (when loop mode enabled)

For example:

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

Slots

Swiper Angular component uses "slots" for content distribution. There are 4 slots available

container-start - element will be added to the beginning of swiper-container
container-end (default) - element will be added to the end of swiper-container
wrapper-start - element will be added to the beginning of swiper-wrapper
wrapper-end - element will be added to the end of swiper-wrapper

For example:

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

Will be rendered as:

<div class="swiper-container">
  <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

Virtual Slides rendering here is fully handled by Angular and not required anything except setting [virtual]="true":

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

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

// 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}`
  );
}

Edit on Stackblitz;

Effects

The following effects are available:

- Fade
- Cube
- Coverflow
- Flip

To use effects you have to import and install them first (as all other modules) (Fade example):

import SwiperCore, { EffectFade } from 'swiper';

SwiperCore.use([EffectFade]);

You can find running effect demos here.

Effect Example

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

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

// 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 {}

Edit on Stackblitz