We will learn to create a touch image/content slider or carousel in Angular 11/12. We will use ngx-useful-swiper npm package for creating the swiper image touch slider in this tutorial.
We will also come to know about complete list of swiper features such as following:
- Library Agnostic
- 1:1 Touch Movement
- Mutation Observer
- Rich API
- Full True RTL Support
- Multi-Row Slides Layout
- Transition Effects
- Two-Way Control
- Full Navigation Control
- Flexbox Layout
- Most Flexible Slides Layout Grid
- Parallax Transitions
- Virtual Slides
Swiper Image Touch Slider Example Tutorial Angular 11/12
We simply need to follow the given steps for implementing the lazy loading image in Angular 12 app:
Step 1 is to Create the New Angular App
Step 2 is to Install the Swiper Package
Step 3 is to Add Code on App.Module.ts File
Step 4 is to Add Code on View File
Step 5 is to Add Code On app.Component ts File
Step 6 is to Start the Angular App
Now, let’s learn in detail
Step 1- Creating the New Angular App
First of all, open your terminal and execute the given command on it to install an angular app:
ng new touch-slider-app
Step 2 : Installing the Swiper Package
Next, just install npm package called the swiper package for implementing the swiper in Angular 11 app. Further, we can install the packages by executing the following commands on the terminal.
npm install --save ngx-useful-swiper@latest swiper
After this, we can enable swiper default CSS styling by including the swiper CSS path to the app styles in angular.json file.
...
...
...
"styles": [
"./node_modules/swiper/swiper-bundle.css",
]
...
...
Step 3: Adding Code on App.Module.ts File
Afterwards, we visit src/app directory and open app.module.ts file. Thereafter, we also add the following lines into app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgxUsefulSwiperModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4: Adding the Code on View File
In next step, create the bootstrap carousel in the Angular 11 app. Then, we visit src/app/ and app.component.html and update the following code into it:
<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>
Step 5: Adding Code On app.Component ts File
Now, follow this step in which we visit the src/app directory and open app.component.ts. After this, we add the following code into 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'
},
spaceBetween: 30
};
}
Step 6: Starting the Angular App
Lastly, we reach the final step of implementation where we execute the following command executed on the terminal to start angular bootstrap carousel app:
ng serve
Conclusion
Finally, we reach the end of this tutorial in which we have learnt to execute Swiper Image Touch Slider in Angular app. In this tutorial, we have tried to learn the step by step implementation of the mentioned topic.
Thanks