Know how to create a simple carousel with Angular

By Munmun Das

Know how to create a simple carousel with Angular

In this blog, we are going to discuss, how to create a simple carousel in Angular.

For creating a carousel, first, install ng-bootstrap. So, open the terminal and write down the folder structure, and type:

npm install –save @ng-bootstrap/ ng-bootstrap

Next, go to app.module.ts page


import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

imports: [



Now, we create a new component, named home or whatever you want.

go to the terminal, type.

ng generate component home/ng g component home

After creating the home component, go to the home.component.html page. Write the code given below:


<div class="container-fluid">
      <div class="row">
             <ng-template ngbSlide *ngFor='let img of images; let i=index'>*
                 <img [src]=[img] alt="Random first slide" class="width-100">
                    <div class="carousel-caption">
                        <h3> {{ title [i] }} </h3>

* Here I generate multiple loops.

Next, go to the home.component.ts page and write.


import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

@Component ({

providers: [ NgbCarouselConfig ]


export class HomeComponent implements OnInit {

 public images = [

 '../assets/img/slide1.jpg', **





title = [ 'Slide-1','Slide-2','Slide-3','Slide-4' ];


** Here the source of images.

Now I customized my carousel, so I type some values under constructor

constructor( config: NgbCarouselConfig ) { 

 // customize default values of carousel //

 config.interval = 2000; // images change in 2sec //

 config.wrap = true; // autometically redirect to first image //

 config.keyboard = false;

 config.pauseOnHover = false;


 For open the browser, go to the terminal, and type

ng serve –-o.

Now enjoy your carousel.

Munmun Das Author
Web Designer , Openweb Solutions

Web Designer at Openweb Solutions

Posts created 9

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top