Swiperv6.4.5
Most Modern Mobile Touch Slider
Get StartedAPIReactSvelteVue.jsAngularDemos
stars forks
Sponsors

Swiper Angular Components

Getting started

Step 1: Install Swiper

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

npm i swiper

Step 2: Import SwiperModule module:

import { SwiperModule } from 'swiper/angular';

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

Step 3: Add styles:

Import Swipers CSS in styles.scss

@import "~swiper/swiper-bundle";

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

CSS Styles

CSS styles for bundle version:

CSS styles for core version and components:

Less Styles

Less styles are separate styles for core version and components:

SCSS Styles

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

Usage

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

// import Swiper core and required components
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 components). If you want to use Navigation, Pagination and other components, you have to install them first.

Here is the list of additional modules imports:

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

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

// install Swiper components
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:

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

SwiperSlideDirective props

PropTypeDefaultDescription
virtualIndexnumberActual swiper slide index. Required to be set for virtual slides

Swiper Angular forces the use of ng-template in favor of supporting full featured loop mode.

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

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

SwiperSlideDirective variables

SwiperSlideDirective exports the following variables:

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

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 components
import SwiperCore, { Virtual } from 'swiper/core';

// install Swiper components
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:

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.

Full Fade Effect Example

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

// import Swiper core and required components
import SwiperCore, { EffectFade, Swiper } from "swiper/core";

// install Swiper components
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