Swiper Angular plugin is available only via NPM as a part of the main Swiper library:
npm i swiper
SwiperModule
module:import { SwiperModule } from 'swiper/angular';
@NgModule({
imports: [SwiperModule],
})
export class YourAppModule {}
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 for bundle version:
swiper-bundle.css
- all Swiper styles including all components styles (like Navigation, Pagination, etc.)swiper-bundle.min.css
- same as previous but minifiedCSS styles for core version and components:
swiper.min.css
- only core Swiper stylescomponents/a11y/a11y.min.css
- styles required for A11y componentcomponents/controller/controller.min.css
- styles required for A11y componentcomponents/effect-coverflow/effect-coverflow.min.css
- styles required for Coveflow Effect componentcomponents/effect-cube/effect-cube.min.css
- styles required for Cube Effect componentcomponents/effect-fade/effect-fade.min.css
- styles required for Fade Effect componentcomponents/effect-flip/effect-flip.min.css
- styles required for Flip Effect componentcomponents/lazy/lazy.min.css
- styles required for Lazy componentcomponents/navigation/navigation.min.css
- styles required for Navigation componentcomponents/pagination/pagination.min.css
- styles required for Pagination componentcomponents/scrollbar/scrollbar.min.css
- styles required for Scrollbar componentcomponents/thumbs/thumbs.min.css
- styles required for Thumbs componentcomponents/zoom/zoom.min.css
- styles required for Zoom componentLess styles are separate styles for core version and components:
swiper.less
- only core Swiper stylescomponents/a11y/a11y.less
- styles required for A11y componentcomponents/controller/controller.less
- styles required for Controller componentcomponents/effect-coverflow/effect-coverflow.less
- styles required for Coveflow Effect componentcomponents/effect-cube/effect-cube.less
- styles required for Cube Effect componentcomponents/effect-fade/effect-fade.less
- styles required for Fade Effect componentcomponents/effect-flip/effect-flip.less
- styles required for Flip Effect componentcomponents/lazy/lazy.less
- styles required for Lazy componentcomponents/navigation/navigation.less
- styles required for Navigation componentcomponents/pagination/pagination.less
- styles required for Pagination componentcomponents/scrollbar/scrollbar.less
- styles required for Scrollbar componentcomponents/thumbs/thumbs.less
- styles required for Thumbs componentcomponents/zoom/zoom.less
- styles required for Zoom componentSCSS styles are also separate styles for core version and components:
swiper.scss
- only core Swiper stylescomponents/a11y/a11y.scss
- styles required for A11y componentcomponents/controller/controller.scss
- styles required for Controller componentcomponents/effect-coverflow/effect-coverflow.scss
- styles required for Coveflow Effect componentcomponents/effect-cube/effect-cube.scss
- styles required for Cube Effect componentcomponents/effect-fade/effect-fade.scss
- styles required for Fade Effect componentcomponents/effect-flip/effect-flip.scss
- styles required for Flip Effect componentcomponents/lazy/lazy.scss
- styles required for Lazy componentcomponents/navigation/navigation.scss
- styles required for Navigation componentcomponents/pagination/pagination.scss
- styles required for Pagination componentcomponents/scrollbar/scrollbar.scss
- styles required for Scrollbar componentcomponents/thumbs/thumbs.scss
- styles required for Thumbs componentcomponents/zoom/zoom.scss
- styles required for Zoom componentimport { 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:
Virtual
- Virtual Slides moduleKeyboard
- Keyboard Control moduleMousewheel
- Mousewheel Control moduleNavigation
- Navigation modulePagination
- Pagination moduleScrollbar
- Scrollbar moduleParallax
- Parallax moduleZoom
- Zoom moduleLazy
- Lazy moduleController
- Controller moduleA11y
- Accessibility moduleHistory
- History Navigation moduleHashNavigation
- Hash Navigation moduleAutoplay
- Autoplay moduleEffectFade
- Fade Effect moduleEffectCube
- Cube Effect moduleEffectFlip
- Flip Effect moduleEffectCoverflow
- Coverflow Effect moduleThumbs
- Thumbs moduleimport { 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')
}
}
SwiperComponent
propsSwiper
Angular component receive all Swiper parameters as component props
SwiperComponent
eventsSwiper component supports all Swiper events, including additional swiper
event that returns swiper instance as soon as posible. For example:
<swiper
(swiper)="..."
(slideChange)="..."
(reachEnd)="..."
...
>
SwiperSlideDirective
propsProp | Type | Default | Description |
---|---|---|---|
virtualIndex | number | Actual 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
variablesSwiperSlideDirective
exports the following variables:
isActive
- true when current slide is activeisPrev
- true when current slide is the previous from activeisNext
- true when current slide is the next from activeisVisible
- 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>
Swiper Angular component uses "slots" for content distribution. There are 4 slots available
container-start
- element will be added to the beginning of swiper-containercontainer-end
(default) - element will be added to the end of swiper-containerwrapper-start
- element will be added to the beginning of swiper-wrapperwrapper-end
- element will be added to the end of swiper-wrapperFor 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 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}`);
}
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.
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 {}