Angular 14 Swiper Image Touch Slider Example Tutorial

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

Angular 14 Swiper Image Touch Slider Example Tutorial

Use the following steps to create swiper image touch slider in angular 14 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

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 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 a 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

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 the terminal to start angular app:

ng serve

Recommended Angular Tutorials