Angular 13 Swiper Image Touch Slider Example Tutorial

This tutorial will guide you on how to create a touch-enabled image/content slider or carousel in an Angular 13 application using the ngx-useful-swiper npm package. You will also learn about the various features of Swiper, including library agnosticism, touch movement, mutation observer, rich API, full RTL support, multi-row slides layout, transition effects, two-way control, full navigation control, flexbox layout, the most flexible slides layout grid, parallax transitions, images lazy loading, and virtual slides.

To create a Swiper image touch slider in an Angular 13 app, follow the steps below:

Step 1: Create a new Angular app by running the following command in your terminal:

ng new my-new-app

Step 2: Install the Swiper package by executing the following command in your terminal:

npm install --save [email protected] swiper

You can enable Swiper default CSS styling by adding the swiper CSS path to the app styles in the angular.json file.

Step 3: Open the app.module.ts file in the src/app directory and add the following lines of code:

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: Open the app.component.html file in the src/app directory and add the following code to create a Swiper touch carousel in your Angular app:

<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: Open the app.component.ts file in the src/app directory and add the following code:

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: Run the following command in your terminal to start your Angular app:

ng serve

In conclusion, by following the above steps, you can easily create a touch-enabled image/content slider or carousel in your Angular 13 app using the ngx-useful-swiper npm package.