Angular – Implement Ultimate! Swiper Image Slider/ Carousel in 3 Steps

AIn 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.

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 official site.

Let’s get started!

Create a New Project using Angular CLI

Make sure you have the latest version of Angular CLI installed

Now create a new Angular Project by running following commands

Install Carousel Package in Application

 

Import Package in Application Main Module

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

 

Include Swiper CSS and JS Libraries

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

Add HTML Directive

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

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

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

Some CSS Styling

Defining swiper element dimensions and an image container.

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

 

Leave a Reply

avatar
  Subscribe  
Notify of