Learn how to implement Swiper Image Touch Slider in Angular 13

In this article learn how to swiper touch image slider in angular. For that, we need to use the “ngx-useful-swiper” library to implement. Let’s start first creating new application for angular 13 runs below command to create a sample project.


//install angular cli module 
npm install -g @angular/cli

//create a sample project
ng new image-touchslider

After creating a sample project called “image-touchslider”. you need go to that directory to start work on that


cd ng image-touchslider
// open in visual studio run below command
code .

Let’s add a swiper module now open the terminal and run the below command to install


npm install ngx-useful-swiper@latest swiper

After installing the module you need to import in the application module file “app.module.ts” display in below code


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';

@NgModule({
  imports: [BrowserModule, FormsModule, NgxUsefulSwiperModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

You need to add style in angular.json add below code


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

Let’s now implement a touch-based content slider in angular. For that, you have to import the SwiperOptions at the top section of the angular component displayed in the below code “app.component.ts” file.


import { Component, VERSION } from '@angular/core';
import { SwiperOptions } from 'swiper';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  config: SwiperOptions = {
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    spaceBetween: 45,
  };
}

Below code needs to add 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/india" alt="img 2" />
    </div>
    <div class="swiper-slide">
      <img src="https://loremflickr.com/600/400/paris,bpy/all" alt="img 3" />
    </div>
    <div class="swiper-slide">
      <img src="https://loremflickr.com/g/600/400/usa" 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>

Output

Below is the full embeded code for Swiper Touch Image Slider in angular. you can easily used in your application.
Example

Spread the love