Angular 14 swiper image touch slider tutorial. In this tutorial, you will learn how to create a touch image/content slider or carousel in an angular 14 app using the ngx-useful-swiper npm package.
As well as you will know the complete list of Swiper features, 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
- Images Lazy Loading
- Virtual Slides
Angular 14 Swiper Image Touch Slider Example Tutorial
Use the following steps to create swiper image touch slider in angular 14 apps; as follows:
- Step 1 – Create New Angular App
- Step 2 – Install Swiper Package
- Step 3 – Add Code on App.Module.ts File
- Step 4 – Add Code on View File
- Step 5 – Add Code On app.Component ts File
- Step 6 – Start the Angular App
Step 1 – Create New Angular App
First of all, open your terminal and execute the following command on it to install angular app:
ng new my-new-app
Step 2 – Install Swiper Package
Then install NPM package called Swiper Package to implement Swiper in angular app. So, You can install the packages by executing the following commands on the terminal:
npm install --save ngx-useful-swiper@latest swiper
After that, you 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 – Add Code on App.Module.ts File
In this step, visit src/app directory and open app.module.ts file. And then add the following lines of 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 – Add Code on View File
In this step, create a swiper touch carousel in angular app. So, 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 – Add Code On app.Component ts File
In this step, visit the src/app directory and open app.component.ts. Then 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 – Start the Angular App
In this step, execute the following command on the terminal to start angular app:
ng serve