There are a few options on how to include/import Swiper into your Angular project:
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.
Be the first to know about new updates and exclusive discounts. No spam, just great offers!
How about
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© 2025 Domiex Created & Crafted by SRBThemes.