Swiper Image Touch Slider in Angular

In this article, we’ll learn swiper image slider in Angular. For that, we used the “ngx-useful-swiper” module. Swiper slier is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
Main Features of Swiper slier
– Library Agnostic
– Mutation Observer
– Full True RTL Support
– Multi Row Slides Layout
– Flexbox Layout
– Parallax Transitions
– Full Navigation Control
– Images Lazy Loading

Let’s create a new project to implement swiper image slider in angular for that you need to run the following command to create a project.


ng new swiper-image

“swiper-image” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd swiper-image”. To Run angular applications, it required to run “ng serve”.


After that, we need to install the ngx-useful-swiper & swipernpm package in our application. For that run the below command to install.


npm install ngx-useful-swiper@latest swiper

After installing the module, we need to put it in our “app.module.ts” file so we can use in our code. below is the code need to update in the “app.module.ts” files.


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgxUsefulSwiperModule } from 'ngx-useful-swiper';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

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

Let’s add the below code in our app.component.ts file to create a swiper slider.


import { Component } from "@angular/core";
import { SwiperOptions } from "swiper";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  Images: Array<object> = [
    {
      src: "https://loremflickr.com/g/600/500/nature",
      alt: "Image 1"
    },
    {
      src: "https://loremflickr.com/600/500/flower",
      alt: "Image 2"
    },
    {
      src: "https://loremflickr.com/600/500/paris,girl/all",
      alt: "Image 3"
    },
    {
      src: "https://loremflickr.com/600/500/cricket",
      alt: "Image 4"
    },
    {
      src: "https://loremflickr.com/600/500/football",
      alt: "Image 5"
    },
    {
      src: "https://loremflickr.com/600/500/brazil,rio",
      alt: "Image 6"
    }
  ];

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

below code need to “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>



Output

Below is the full embeded code for swiper image slider in angular. you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •