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

Import SwiperModule module

import { SwiperModule } from 'swiper/angular';

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

Styles

Swiper package contains different sets of CSS, Less and SCSS styles:

• swiper/css - only core Swiper styles
• swiper/css/bundle - all Swiper styles including all modules styles (like Navigation, Pagination, etc.)

Modules styles (not required if you already imported bundle styles):

• swiper/css/a11y - styles required for A11y module
• swiper/css/autoplay - styles required for Autoplay module
• swiper/css/controller - styles required for Controller module
• swiper/css/effect-cards - styles required for Cards Effect module
• swiper/css/effect-coverflow - styles required for Coverflow Effect module
• swiper/css/effect-creative - styles required for Creative Effect module
• swiper/css/effect-cube - styles required for Cube Effect module
• swiper/css/effect-fade - styles required for Fade Effect module
• swiper/css/effect-flip - styles required for Flip Effect module
• swiper/css/free-mode - styles required for Free Mode module
• swiper/css/grid - styles required for Grid module
• swiper/css/hash-navigation - styles required for Hash Navigation module
• swiper/css/history - styles required for History module
• swiper/css/keyboard - styles required for Keyboard module
• swiper/css/lazy - styles required for Lazy module
• swiper/css/manipulation - styles required for Manipulation module
• swiper/css/mousewheel - styles required for Mousewheel module
• swiper/css/navigation - styles required for Navigation module
• swiper/css/pagination - styles required for Pagination module
• swiper/css/parallax - styles required for Parallax module
• swiper/css/scrollbar - styles required for Scrollbar module
• swiper/css/thumbs - styles required for Thumbs module
• swiper/css/virtual - styles required for Virtual module
• swiper/css/zoom - styles required for Zoom module

For Less styles replace css with less in imports paths, e.g.:

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

For SCSS styles replace css with scss in imports paths, e.g.:

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

Usage

Params can be passed on <swiper> as parameters or via [config]

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

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

• Virtual - Virtual Slides module
• Keyboard - Keyboard Control module
• Mousewheel - Mousewheel Control module
• Navigation - Navigation module
• Pagination - Pagination module
• Scrollbar - Scrollbar module
• Parallax - Parallax module
• FreeMode - Free Mode module
• Grid - Grid module
• Manipulation - Slides manipulation module (only for Core version)
• 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
• EffectCards - Cards Effect module
• EffectCreative - Creative Effect module
• Thumbs - Thumbs module

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

Accessing swiper reference

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 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 possible. For example: use EventsParams for typing. Parameters are always returned as an array even if only one paramter passed.

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

<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 (watchSlidesProgress 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">
  <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';

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

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

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

What next?

As you see it is really easy to integrate Swiper into your website or app. So here are your next steps:

• Go to API Documentation to learn more about all Swiper API and how to control it.
• If you have questions about Swiper ask them in StackOverflow or Swiper Discussions.
• Create issue on GitHub if you found a bug.
• If you are looking for support, we have a private Discord support chat room for Swiper Patrons.