In this article, we will learn how to add swiper to our Angular Application. Here we see how to add swiper in the CDN link and package install some information about swiper for example.
tutorial for the swiper picture touch slider in Angular, This comprehensive tutorial will show you how to use the ngx-useful-swiper npm package to build a touch image/content slider or carousel in an angular project.
tutorial for the swiper picture touch slider in Angular 13; This comprehensive tutorial will show you how to use the ngx-useful-swiper npm package to build a touch image/content slider or carousel in an angular project.
Modern platforms employ the next-useful-swiper, often known as Swiper, to generate cyclic view carousels from sublime content or picture sliders. It provides touch-based slider support in practically all contemporary platforms, including JavaScript, Angular, React, Vue, and Svelte.
It provides top-notch capabilities to strengthen carousel components, is free, and fully supports touch interaction without relying on any external jQuery libraries.
Rich API support is provided, allowing mutation watchers to manage dynamic modifications through the DOM by automatically reinitializing and recalculating crucial parameters. What matters most is that it
Here is the complete list of Swiper features:
Library Agnostic
1:1 Touch movement
Mutation Observer
Rich API
True RTL Full Support
Layout for Multi-Row Slides
Transitional Result
Dual-Axis Control
Complete navigational control
Layout in Flexbox
Grid for Most Flexible Slides
Smooth Transitions
Lazy Image Loading
Online Slides
Here are the instructions you require to follow to implement the Swiper carousel in the angular application from scratch.
- Step 1: Create Angular Project
- Step 2: Install Swiper Package
- Step 3: Add Swiper CSS
- Step 4: Register NgxUsefulSwiperModule in App Module
- Step 5: Implement Touch Content Slider
- Step 6: Add Dynamic Slides in Swiper
- Step 7: Start Angular Project
Create Angular Project
Enlightening new project-name
Install Swiper Package
In the next step, you have to install the Swiper package into the angular project. It is considered the most modern free mobile touch slider, which used the
hardware-accelerated transition.
EnlightenerEnlightenerEnlightenernpm install --save ngx-useful-swiper@latest swiper
Add Swiper CSS
Yes, you can enable swiper default CSS styling by including the swiper CSS path to the app styles in the angular.json file:
EnlightenerEnlightenerEnlightener...
...
...
"styles": [
"./node_modules/swiper/swiper-bundle.css",
]
...
...
Register NgxUsefulSwiperModule in App Module
Next, within the app.module.ts file, import the NgxUsefulSwiperModule from the ‘ngx-useful-swiper’ package, plus register the module in the imports array as given below
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgxUsefulSwiperModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Setup the Swiper package
Installing the Swiper package into the angular project is the next step. It is regarded as the most advanced free mobile touch slider since it employed a transition that was hardware-accelerated.
Add the following code in the app.component.ts file:
import { Component } from '@angular/core';
import { SwiperOptions } from 'swiper';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
config: SwiperOptions = {
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'space-between spaceBetween: 30
};
}
Put Touch Content Slider to use
Let me demonstrate how you use angular to construct a touch-based content slider. To allow navigation, define configuration swipe options that include previous and next arrows, then import the SwiperOptions section at the start of the angular TypeScript template.
Add the following code in the app.component.ts file:
import { Component } from '@angular/core';
import { SwiperOptions } from 'swiper';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
config: SwiperOptions = {
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'space-between spaceBetween: 30
};
}
As stated, you may construct a slider, add the GUI content, specify the swiper directive, and pass the config attribute.
Additionally, provide the swiper-wrapper class and the child elements with the swiper-slide class; each child element alludes to the slide that a user can rotate by touching and swiping to separate slides.
Update the following code in the app.component.html file:
<swiper [config]="config">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://loremflickr.com/g/600/400/paris" alt="img 1"></div>
<div class="swiper-slide"><img src="https://loremflickr.com/600/400/brazil,rio" alt="img 2"></div>
<div class="swiper-slide"><img src="https://loremflickr.com/600/400/paris,girl/all" alt="img 3"></div>
<div class="swiper-slide"><img src="https://loremflickr.com/g/600/400/paris" alt="img 4"></div>
<div class="swiper-slide"><img src="https://loremflickr.com/600/400/brazil,rio" alt="img 5"></div>
<div class="swiper-slide"><img src="https://loremflickr.com/600/400/paris,girl/all" alt="img 6"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</swiper>
required of design we can changes CSS and layout of wiper, and apply a extra css .
Output
