Swiper

There are a few options on how to include/import Swiper into your Angular project:

Install from NPM

We can install Swiper from NPM:

yarn add swiper

Import Swiper styles in your global SCSS file, such as src/assets/scss/plugins.scss:

@import 'swiper/swiper-bundle.css';

You can import Swiper in your Angular component file:

import { Swiper, SwiperSlide } from 'swiper/react';

Below is an example of how to use Swiper in your component:

HTML

<swiper-container class="paginationDynamicSlider">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
</swiper-container>

JavaScript

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

@Component({
    selector: 'app-swiper',
    templateUrl: './swiper.component.html',
})
export class SwiperComponent {
    config: SwiperOptions = {
        pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true,
        },
        // Additional options can be added here
    };
}

Make sure to include Swiper's JS library in your Angular project. You can add it to your angular.json file under the scripts section:

"scripts": [
"node_modules/swiper/swiper-bundle.min.js"
]

Refer to the official documentation for further customization options.

Receive the latest updates directly in your inbox!

Be the first to know about new updates and exclusive discounts. No spam, just great offers!

How about

A Custom Project?

With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.

Hire Us
Domiex Admin & Dashboards
230+

Total Pages

5+

Layouts

11+

Application

We provide quick support withing one business day to all of our customers.

© 2025 Domiex Created & Crafted by SRBThemes.