Angular 12/11 Swiper Image Touch Slider Example Tutorial

Angular 11/12 swiper image touch slider tutorial. In this tutorial, you will learn how to create a touch image/content slider or carousel in an angular 11/12 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

Swiper Image Touch Slider in Angular 12/11 Example Tutorial

• 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 11 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 bootstrap carousel in angular 11 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 terminal to start angular bootstrap carousel app:

ng serve

Recommended Angular Posts