Swiper Image Touch Slider In Angular 12

Angular 12 swiper image touch slider example; In this tutorial, i will show you how to install swiper npm and create a touch image/content slider or carousel in an angular 11/12 app using the ngx-useful-swiper npm package.

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. 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 12 Swiper Image Touch Slider Example Tutorial

• Step 1 – Create New Angular App
• Step 2 – Install Swiper Package
• Step 3 – Import Modules 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

Execute the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install Swiper Package

Execute the following command on terminal to install NPM package called Swiper Package to implement Swiper in angular:

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 – Import Modules on App.Module.ts File

Import modules; so go to 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

Create 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

Go to 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

Execute the following command on terminal to start angular swiper carousel app:

ng serve

Recommended Angular Tutorial