Angular 16 Swiper Image Touch Slider Example

Angular 16 swiper image touch slider; Through this tutorial, i am going to show you how to create a touch image/content slider or carousel in an Angular 16 apps.

Angular 16 Swiper Image Touch Slider Example Tutorial

Follow the below given steps to create swiper image touch slider in Angular 16 apps; as follows:

  • 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

Run the following command on command prompt to install angular app:

ng new my-new-app

Step 2 – Install Swiper Package

Run the following command on command prompt to install NPM package called Swiper Package to implement Swiper in angular app:

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

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

Go to 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 – Import Components 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

Run the following command on the terminal to start angular app:

ng serve

Recommended Angular Tutorials

Leave a Comment