Angular 15 Swiper Image Touch Slider Example Tutorial

Angular 13 swiper image touch slider tutorial; In this detailed guide, we will explain how to create a touch image/content slider or carousel in an angular app using the ngx-useful-swiper npm package.

The ngx-useful-swiper, aka Swiper, is sublime content or image slider used in modern platforms to create a cyclic view carousel. Not only angular, but it offers touch-based slider support in almost every modern platform, be it JavaScript, Angular, React, Vue or Svelte.

It offers top-notch features to empower carousel components; it doesn’t require any third-party jQuery or dependence; it is free and comes with full touch interaction support.

It gives rich API support, enabling mutation observers to automatically reinitialize and recalculate essential parameters to handle dynamic updates through DOM. Most importantly, it is open-source and free to use.

Here are the complete list of Swiper features:

• 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 13 Swiper Mobile Touch Slider Integration Example

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

First and foremost ensure you have installed the angular cli on your system, if not then use the following command:

npm install -g @angular/cli

Further, start with installing a new angular app:

ng new ng-demo

Move to app’s root:

cd ng new ng-demo

Install Swiper Package

In the next step, you have to install Swiper package into the angular project. It is considered the most modern free mobile touch slider, which used the hardware-accelerated transition.

npm 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 angular.json file:

...
...
...
"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 {}

Implement Touch Content Slider

Let me show you how to implement a touch-based content slider in angular. First, you have to import the SwiperOptions at the top section of the angular TypeScript template, define config swipe options that enable navigations, and previous and next arrows.

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'
    },
    spaceBetween: 30
  };  
  
}

You can create a slider and add the GUI content as suggested, define the swiper directive pass the config property.

Furthermore, define the swiper-wrapper class and the child elements with a swiper-slide class; each child element refers to the slide that a user can rotate by touching and swiping to individual 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>

Here is the CSS code that you need to add in the CSS or SCSS file to set height and width of the swiper slider.

swiper {
  height: 400px;
  width: 600px;
}

Add Dynamic Slides in Swiper

In this step we will show you how to easily add dynamic slides in swiper component, hence open and insert the following code in the app.component.html file:

<swiper [config]="config">
  <div class="swiper-wrapper">
    <img class="swiper-slide" *ngFor="let img of Images" [src]="img.src" [alt]="img.alt" />
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</swiper>

Update the recommended 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 {
  Images: Array<object> = [
    {
      src: 'https://loremflickr.com/g/600/400/paris',
      alt: 'Image 1',
    }, {
      src: 'https://loremflickr.com/600/400/brazil,rio',
      alt: 'Image 2'
    }, {
      src: 'https://loremflickr.com/600/400/paris,girl/all',
      alt: 'Image 3'
    }, {
      src: 'https://loremflickr.com/600/400/brazil,rio',
      alt: 'Image 4'
    }, {
      src: 'https://loremflickr.com/600/400/paris,girl/all',
      alt: 'Image 5'
    }, {
      src: 'https://loremflickr.com/600/400/brazil,rio',
      alt: 'Image 6'
    }    
  ]
  config: SwiperOptions = {
    pagination: { 
      el: '.swiper-pagination', 
      clickable: true 
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    spaceBetween: 30
  };  
  
}

Start Angular Project

Ultimately, you can open the terminal and use command to start the angular project:

ng serve

Here is the url which helps you test the app:

http://localhost:4200

Conclusion

Angular 12 swiper image slider tutorial is completed; In this example, we have gone through step by step to understand how to integrate a touch-based image or the content slider in an angular app with the help of the Swiper library.

We hope it will help you create a touch-based carousel component in an angular app.