Angular 7 Bootstrap 4 | Add Image/ Content Slider/ Carousel using ng-bootstrap in Angular 7 Applications

Bootstrap provided a wide variety of easy to use Web Components for UI development. NG-Bootstrap is Angular based library using which we can use Bootstrap UI web components in Angular’s latest versions.

You can check other posts on Angular + Bootstrap

Angular 7 Bootstrap 4 | Date-picker and Time-picker Example Implement in Angular Application

 

In this post, we will discuss another very important Web Component available in Ng-Bootstrap library which is a Carousel. Using Carousel we can add a Content or Image slider with many usable options.

Here we will create a new Angular 7 Project and Integrate Ng-Bootstrap to use Carousel component.

Let’s get started!

Create New Angular Project Using CLI

First, we will create a new Angular Project using Angular CLI. Make sure you have installed the latest version on Angular CLI by running following command

Create a new Angular project then select few options asked. We have not selected Angular routing to make this demo easier.

Change directory to point our project

If you have Visual Studio Code installed then run following command to open the project in VS Code directly.

 

Install Bootstrap in Angular Project

Let’s install Bootstrap by running following NPM command. This will install the latest bootstrap version ( Current is 4.1.0 )

ng-bootstrap includes UI components only, so for adding styling to these components we need to include CSS styling file in the index.html at Angular project root

Import NgbModule ( Bootstrap module ) in the app.module.ts file

 

Add Carousel Component in Application

As we have already added NgbModule in the app.module.ts file, so we can add any Bootstrap component. Now open app.component.html file then add following HTML with <ngb-carousel> carousel directive

ngbSlide represents a single slide of the carousel which is having a <img> tag and a <div> with a carousel-caption class to add text on the slide image

Add the following images object in the app.compont.ts file

Configuration of carousel

There are a number of configuration parameters available which can be added to the individual carousel as follows

or Global configuration as follows

Customize Next Previous Navigation Arrows in ng-bootstrap Carousel

Due to the white color of navigation arrows, these become invisible to a user on bright images. Just add the following CSS style in the styles.css file to add a nice background on hover of Carousel navigation.

So here we Added a nice and simple bootstrap’s traditional Carousel in Angular 7 application. You can check other Angular carousel tutorials here.

Leave a Reply

avatar
  Subscribe  
Notify of