Angular 7/6/5 Implement Ultimate! Swiper Image Slider/ Carousel in 3 Steps

In this post, we will discuss a more advanced Image Carousel know as Swiper. This Carousel is actually more than an Image Slider, we can have any type of content from HTML, graphics, video etc. Swiper also supports parallax effect multiple slide effects, having verticle and horizontal sliders. Swiper also supports nested and easy installation of multiple Sliders/ Carousels on a single view.

 

 

Support Update: The angular2-useful-swiper is only supported up to Angular version 7. For latest Angular version 10,9 and 8 check this updated Swiper Carousel tutorial.

 

 

 

Here we will implement Swiper in Angular Application and discuss steps to make it work perfectly. You can have a loop to all demos available on the official site.

Also See:
Slick Carousel with 3 Steps having Custom Navigation in Angular 6+
Owl Carousel 2 with 3 Steps having Custom Navigation in Angular 6+

Let’s get started!

Create a New Project using Angular CLI

Make sure you have the latest version of Angular CLI installed

$ npm install @angular/cli@latest

Now create a new Angular Project by running following commands

$ ng new NGSwiperCarousel
$ ? Would you like to add Angular routing? No
$ ? Which stylesheet format would you like to use? SCSS

Install Carousel Package in Application

$ npm i angular2-useful-swiper
$ npm install --save swiper

 

Import Package in Application Main Module

In app.module.ts, Import package and add in imports array

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { SwiperModule } from 'angular2-useful-swiper';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SwiperModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Include Swiper CSS and JS Libraries

Open file angular.json in the root of the project then add CSS and JS libraries as follows.

...
...
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/swiper/dist/css/swiper.css" 
            ],
            "scripts": [
              "node_modules/swiper/dist/js/swiper.js"    
            ]
          },
...
...

Add HTML Directive

In app.component.html, add following HTML code with structure to create a slider.

<swiper [config]="config">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="../assets/images/640480.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="../assets/images/640480.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="../assets/images/640480.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="../assets/images/640480.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="../assets/images/640480.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="../assets/images/640480.jpg" />
    </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</swiper>

<swiper>: Swiper directive is called to implement the swiper method on this element.

[config]: Takes configuration provided in a component.
.swiper-pagination: Container which will have pagination dots
.swiper-button-next: Next button HTML container
.swiper-button-prev: Previous button HTML container

Add Configuration in Component

In app.component.ts, add congiguration for swiper directive we added above.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'NG7Swiper';


  config: SwiperOptions = {
    autoplay: 3000, // Autoplay option having value in milliseconds
    initialSlide: 3, // Slide Index Starting from 0
    slidesPerView: 3, // Slides Visible in Single View Default is 1
    pagination: '.swiper-pagination', // Pagination Class defined
    paginationClickable: true, // Making pagination dots clicable
    nextButton: '.swiper-button-next', // Class for next button
    prevButton: '.swiper-button-prev', // Class for prev button
    spaceBetween: 30 // Space between each Item
  };


}

You can check more configurations in node_modules/@types/swiper/index.d.ts  file. Check demo here

Some CSS Styling

swiper{
    height: 250px;
    width: 80%;
    margin: auto;
}

.swiper-slide{
    img{
        width: 100%;
    }
}

Defining swiper element dimensions and an image container.

After implementing all steps your Angular Swiper! will look like this.

 

 

Support Update: The angular2-useful-swiper is only supported up to Angular version 7. For latest Angular version 10,9 and 8 check this updated Swiper Carousel tutorial.