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.