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

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *