Swiper Angular Modern

A modern Angular wrapper for Swiper.js - the most modern free mobile touch slider. This library provides a standalone Angular component that makes it easy to integrate Swiper into your Angular applications.

Features

• 🎯 Standalone Component - No NgModules required
• 🎨 Full Swiper Support - All Swiper features and modules
• 📦 Type-Safe - Full TypeScript support with Swiper types
• 🎭 Multiple Effects - Fade, Cube, Coverflow, Flip effects included
• 📱 Responsive - Built-in breakpoint support
• 🔧 Flexible Configuration - Simple inputs or full SwiperOptions

Installation

Step 1: Install the package

npm install swiper-angular-modern

Step 2: Install peer dependencies

The library requires Swiper and Angular as peer dependencies:

npm install swiper@^12.0.0

Note: Angular (>=18.2.0 <22.0.0) should already be installed in your project.

Setup

Step 1: Import the component

Since NgSwiperComponent is a standalone component, simply import it in your component:

import { Component } from '@angular/core';
import { NgSwiperComponent } from 'swiper-angular-modern';
import { SwiperOptions } from 'swiper/types';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [NgSwiperComponent],
  templateUrl: './my-component.html'
})
export class MyComponent {
  // Your component logic
}

Step 2: Import Swiper styles

This is a critical step! You must import the Swiper styles for the component to work properly.

Option A: Import in your global styles (Recommended)

Add the library styles to your angular.json:

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/swiper-angular-modern/src/lib/styles.scss"
            ]
          }
        }
      }
    }
  }
}

Or import directly in your global styles.scss:

@import 'swiper-angular-modern/src/lib/styles';

Option B: Import in component styles

If you prefer component-scoped styles, import in your component's style file:

@import 'swiper-angular-modern/src/lib/styles';

Important: The library's styles file includes:

• Core Swiper CSS
• Navigation module styles
• Pagination module styles
• Autoplay module styles
• Effect styles (Fade, Cube, Coverflow, Flip)

Usage

Basic Example

<lib-ng-swiper>
  <div class="swiper-slide">Slide 1</div>
  <div class="swiper-slide">Slide 2</div>
  <div class="swiper-slide">Slide 3</div>
</lib-ng-swiper>

With Configuration

import { Component } from '@angular/core';
import { NgSwiperComponent } from 'swiper-angular-modern';
import { SwiperOptions } from 'swiper/types';

@Component({
  selector: 'app-swiper-example',
  standalone: true,
  imports: [NgSwiperComponent],
  template: `
    <lib-ng-swiper
      [options]="swiperOptions"
      [navigation]="true"
      [pagination]="true"
      [loop]="true"
      [slidesPerView]="3"
      [spaceBetween]="30"
    >
      <div class="swiper-slide" *ngFor="let slide of slides">
        {{ slide }}
      </div>
    </lib-ng-swiper>
  `
})
export class SwiperExampleComponent {
  slides = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'];

  swiperOptions: SwiperOptions = {
    breakpoints: {
      640: {
        slidesPerView: 2,
        spaceBetween: 20
      },
      768: {
        slidesPerView: 3,
        spaceBetween: 30
      },
      1024: {
        slidesPerView: 4,
        spaceBetween: 40
      }
    }
  };
}

Advanced Configuration with SwiperOptions

import { SwiperOptions } from 'swiper/types';

export class MyComponent {
  swiperOptions: SwiperOptions = {
    // Responsive breakpoints
    breakpoints: {
      320: {
        slidesPerView: 1,
        spaceBetween: 10
      },
      640: {
        slidesPerView: 2,
        spaceBetween: 20
      },
      1024: {
        slidesPerView: 3,
        spaceBetween: 30
      }
    },
    // Effect
    effect: 'fade',
    fadeEffect: {
      crossFade: true
    },
    // Speed
    speed: 600,
    // Autoplay
    autoplay: {
      delay: 3000,
      disableOnInteraction: false
    }
  };
}

<lib-ng-swiper [options]="swiperOptions">
  <!-- slides -->
</lib-ng-swiper>

Using Angular Control Flow (Angular 17+)

<lib-ng-swiper [navigation]="true" [pagination]="true">
  @for (item of items; track item.id) {
    <div class="swiper-slide">
      <h3>{{ item.title }}</h3>
      <p>{{ item.description }}</p>
    </div>
  }
</lib-ng-swiper>

Component API

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | options | SwiperOptions | {} | Full Swiper configuration object. Merged with default options. | | navigation | boolean | true | Enable/disable navigation arrows. | | pagination | boolean | true | Enable/disable pagination dots. | | autoplay | boolean | false | Enable/disable autoplay. | | loop | boolean | false | Enable/disable infinite loop. | | slidesPerView | number | 1 | Number of slides visible at once. | | spaceBetween | number | 30 | Space between slides in pixels. |

Notes

• The options input takes precedence over individual inputs (navigation, pagination, etc.)
• All Swiper modules (Navigation, Pagination, Autoplay, Effects) are automatically loaded
• The component uses ViewEncapsulation.None to allow Swiper styles to work properly

Available Swiper Effects

The following effects are included and ready to use:

• Fade - Fade transition between slides
• Cube - 3D cube effect
• Coverflow - Coverflow-style effect
• Flip - 3D flip effect

To use an effect, set it in your SwiperOptions:

swiperOptions: SwiperOptions = {
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  }
};

Styling

Customizing Navigation Buttons

::ng-deep {
  .swiper-button-next,
  .swiper-button-prev {
    color: #333;
    background: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    
    &:hover {
      background: #f0f0f0;
    }
  }
}

Customizing Pagination

::ng-deep {
  .swiper-pagination-bullet {
    background: #333;
    opacity: 0.5;
    
    &.swiper-pagination-bullet-active {
      opacity: 1;
    }
  }
}

Requirements

• Angular >= 18.2.0 and < 22.0.0
• Swiper >= 12.0.0
• TypeScript >= 5.0.0

Browser Support

Same as Swiper.js - all modern browsers and IE11+.

License

ISC

Links

• Swiper.js Documentation
• Angular Documentation