Angular 7/6 | Implement Simple Image Carousel/ Slider in Angular 2 Plus Versions

Image Carousels provides a good front-end user experience to show graphics or images in a small space in an interactive way.

But in Angular Application we hardly find great carousels/ image sliders to work with. In this tutorial, we will implement a Great Simple and Easy to Use Angular Image Carousel.

Let’s get started!

First Create a Project

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

Now we will install carouselamos by joselcvarela using following npm command

Import Package in Application Main Module

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

 

Impliment in Component HTML5

Add following HTML stucture, having carousel directive and other options in app.component.html file

 

ng2-carouselamos: It is the directive for the carousel.
[items]: Will have the object of items which we will define in home.ts.
[width]: Width of carousel taking value in Pixels.
#prev & #next having templates for next and previous buttons.
#item defines the HTML template for each item which will iterate using items object.

Define items object in App Component

In app.component.ts file, we will define list of items for object.

In this tutorial, we have used Random Images from Faker.js.

Pinch of CSS Style

In styles.scss file, we will add following style to add width to images container and main container id. We are adding this style in styles.scss as we have HTML in app.component.html.

 

After successfully performing all steps, Run $ ng serve --open  to open in a browser. Above Carousel will look like below image.

Leave a Reply

avatar
  Subscribe  
Notify of