Angular 8/7 – 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 the official site.

Also See:
Angular 7/6 | Implement Slick Carousel with 3 Steps having Custom Navigation in Angular 6+
Angular 7/6 | Implement 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

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.

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

8
Leave a Reply

avatar
4 Comment threads
4 Thread replies
7 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
MoisésFredrickhelperMD IRFANPrashant Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Kawin
Guest
Kawin

Hi, I encountered a problem.

Error:
ERROR ReferenceError: Swiper is not defined

Prashant
Guest

Please install swiper

Prashant
Guest

Install swiper with this command : npm install –save [email protected]

MD IRFAN
Guest
MD IRFAN

Hi, I am getting error which swiper is not defined

helper
Guest
helper

npm install –save [email protected]

MD IRFAN
Guest
MD IRFAN

can you send me demo on stackblitz

Fredrick
Guest
Fredrick

SwiperOptions is not defined

Moisés
Guest
Moisés

Same error