How to Create Image Touch Carousel in Angular 11 with Swiper

A carousel is an excellent way of showing useful information in a compact view; a carousel/slider not just enhances the user experience but also grabs the user’s attention.

In this tutorial, you will learn how to create an image touch slider in an angular application with the help of the ngx-useful-swiper package.

The ngx-useful-swiper is also known as Swiper, and it is the most modern mobile touch slider available on the node package manager registry. Swiper comes with great features, it profoundly supports iOS and Android apps, all the more it is a default slider component for the Ionic Framework.

The Swiper is not limited to Angular; instead, it is also useful for creating image or content carousel/slider in other frameworks such as JavaScript, Angular, React, Vue or Svelte.

How to Add Swiper Touch Image Slider/Carousel in Angular 11

These are the steps that you need to follow to create touch-based image slider in angular.

  • Step 1: Install Angular App
  • Step 2: Add Swiper Library
  • Step 4: Update Swiper in Main Module
  • Step 5: Create Simple Swiper Carousel
  • Step 6: Create Slides Dynamically
  • Step 7: Run Angular App

Install Angular App

Start with creating an angular app, although we assume you have node, npm, and angular CLI already installed:

ng new angular-touch-slider-example

Next, head over to project directory:

cd ng new angular-touch-slider-example

Add Swiper Library

In this step, open the terminal, then type the following command to install or add the Swiper library’s latest version in the angular app.

npm install --save [email protected] swiper

Once the image carousel added to angular app, then you need to include the the plugin’s CSS path, It will invoke the swiper’s default styling.

Consequently, head over to angular.json file, and add the swiper’s CSS path in styles array:

...
"styles": [
     "./node_modules/swiper/swiper-bundle.css",
]
...

Update Swiper in Main Module

In this step, you have to add the swiper module in application’s main module file, so open app.module.ts file, and add the suggested code as per the given example:

import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';
 
@NgModule({
  declarations: [AppComponent],
  imports: [
     BrowserModule, 
     NgxUsefulSwiperModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

Create Simple Swiper Carousel

Creating a simple touch image carousel is easy; you have to use the swiper directive, define a swiper-wrapper, and add the image slides with the swiper-slide class.

Update the app.component.html file:

<swiper [config]="config">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="https://via.placeholder.com/600.png/09f/fff" alt="Image One">
        </div>
        <div class="swiper-slide">
           <img src="https://via.placeholder.com/600.png/012/fff" alt="Image Two">
        </div>
        <div class="swiper-slide">
           <img src="https://via.placeholder.com/600.png/333/fff" alt="Image Three">
        </div>
        <div class="swiper-slide">
           <img src="https://via.placeholder.com/600.png/212/fff" alt="Image Four">
        </div>
    </div>

    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>

    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</swiper>

SwiperOptions package allows you to configure the swiper options; you can invoke the pagination and navigation arrows such as previous and next. However, there are other options that you can use to customize the swiper slider.

Update 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: 40
  };  
  
}

Head over to SCSS/CSS file and define the height and width as per your slider’s aesthetic requirement.

swiper {
  height: 500px;
  width: 700px;
}

Create Slides Dynamically

To show carousel slides dynamically, you have to define an image collection object, and each item contains the image src and alt attribute.

Update 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 {

  ImgObject: Array<object> = [
    {
      src: 'https://via.placeholder.com/600.png/09f/fff',
      alt: 'Image One',
    }, {
      src: 'https://via.placeholder.com/600.png/021/fff',
      alt: 'Image Two'
    }, {
      src: 'https://via.placeholder.com/600.png/321/fff',
      alt: 'Image Three'
    }, {
      src: 'https://via.placeholder.com/600.png/422/fff',
      alt: 'Image Four'
    }, {
      src: 'https://via.placeholder.com/600.png/654/fff',
      alt: 'Image Five'
    }
  ]

  config: SwiperOptions = {
    pagination: { 
      el: '.swiper-pagination', 
      clickable: true 
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    spaceBetween: 40
  };  
  
}

Keep the similar settings as we use in the previous example. However, just use the *ngFor directive to loop over the image collection object. It will show the slides dynamically based on the number of items available on the image collection object.

Update the app.component.html file:

<swiper [config]="config">

  <div class="swiper-wrapper">
    <img class="swiper-slide" *ngFor="let image of ImgObject" [src]="image.src" [alt]="image.alt" />
  </div>

  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</swiper>

Run Angular App

Finally, open the terminal, use ng serve command to start the angular development server:

ng serve

Your app has started, and you can use the given below url on the browser to test the angular swiper image carousel example:

http://localhost:4200

angular image touch slider