Swiper Image Touch Slider Example Tutorial Angular 11/12

We will learn to create a touch image/content slider or carousel in Angular 11/12. We will use ngx-useful-swiper npm package for creating the swiper image touch slider in this tutorial.

We will also come to know about complete list of swiper features such 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
• Virtual Slides

Swiper Image Touch Slider Example Tutorial Angular 11/12

We simply need to follow the given steps for implementing the lazy loading image in Angular 12 app:

Step 1 is to Create the New Angular App

Step 2 is to Install the Swiper Package

Step 3 is to Add Code on App.Module.ts File

Step 4 is to Add Code on View File

Step 5 is to Add Code On app.Component ts File

Step 6 is to Start the Angular App

Now, let’s learn in detail

Step 1- Creating the New Angular App

First of all, open your terminal and execute the given command on it to install an angular app:

ng new touch-slider-app

Step 2 : Installing the Swiper Package

Next, just install npm package called the swiper package for implementing the swiper in Angular 11 app. Further, we can install the packages by executing the following commands on the terminal.

npm install --save ngx-useful-swiper@latest swiper

After this, we 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: Adding Code on App.Module.ts File

Afterwards, we visit src/app directory and open app.module.ts file. Thereafter, we also add the following lines 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: Adding the Code on View File

In next step, create the bootstrap carousel in the Angular 11 app. Then, we 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: Adding Code On app.Component ts File

Now, follow this step in which we visit the src/app directory and open app.component.ts.  After this, we 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: Starting the Angular App

Lastly, we reach the final step of implementation where we execute the following command executed on the terminal to start angular bootstrap carousel app:

ng serve

Conclusion

Finally, we reach the end of this tutorial in which we have learnt to execute Swiper Image Touch Slider in Angular app. In this tutorial, we have tried to learn the step by step implementation of the mentioned topic.

Thanks