Angular 12 Add Simple Image Carousel/ Slider using ng2-carouselamos

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!

# Create a Project

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 angular-carousel-tutorial
$ ? Would you like to add Angular routing? No
$ ? Which stylesheet format would you like to use? SCSS

# Install the Carousel Package in Application

Now we will install the carouselamos by joselcvarela using the following npm command

$ npm install ng2-carouselamos --save

# Import in Application Module

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { Ng2CarouselamosModule } from 'ng2-carouselamos';

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

# Adding in Component

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

<div id="container">
  <div
    ng2-carouselamos
    class="slides-wrapper"
    [items]="images"
    [width]="850"
    [$prev]="prev"
    [$next]="next"
    [$item]="item"
  >
  </div>


  <ng-template #prev>
    <img src="assets/images/prev.png" id="left" />
  </ng-template>
  <ng-template #next>
    <img src="assets/images/next.png" id="right" />
  </ng-template>
  <ng-template #item let-item let-i="index">

  <div class="slide-items">
    <img src="{{ item.name }}">
  </div>
</div>

</ng-template>

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 the app.component.ts file, we will define the list of items for the object.

import { Component } from '@angular/core';

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

  images: Array<any> = []


  constructor() {
    this.images = [
      { name: 'http://lorempixel.com/640/480/animals/' },
      { name: 'http://lorempixel.com/640/480/abstract/' },
      { name: 'http://lorempixel.com/640/480/business/' },
      { name: 'http://lorempixel.com/640/480/cats/' },
      { name: 'http://lorempixel.com/640/480/city/' },
      { name: 'http://lorempixel.com/640/480/food/' },
      { name: 'http://lorempixel.com/640/480/nightlife/' },
      { name: 'http://lorempixel.com/640/480/fashion/' },
      { name: 'http://lorempixel.com/640/480/people/' },
      { name: 'http://lorempixel.com/640/480/nature/' },
      { name: 'http://lorempixel.com/640/480/sports/' },
      { name: 'http://lorempixel.com/640/480/transport/' },
    ]
  }
}

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

# Adding CSS Style

In styles.scss file, we will add the 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.

/* You can add global styles to this file, and also import other style files */
#container {
    width: 100%;
    margin: 5em auto;
    padding: 0;
    .ng2-carouselamos-container{
        width: 70%;
        margin: auto;
    }
    .slide-items{
        margin-right: 10px;
        img{
            width: 210px;
        }
    }
}

After successfully performing all steps, Run $ ng serve --open to open in a browser. The above Carousel will look like as shown below.

Category: Angular