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.

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

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
John Morgan Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
John Morgan
Guest

I am trying to wrap my head around pulling images from a directory to use in this. I have a folder called “dogs” where I have all my dog code and then separate folders for each of my dogs pictures… basically I want to click on a link and then the carousel will show up all the pics for that dog. I understand I would have to create each caption etc for the pictures but for some reason it does not show the pics at all.

directory structure
\dogs
\dogs\dog1
\dogs\dog1\pictures
\dogs\dog2
\dogs\dog2\pictures
etc…

Any help would be greatly appreciated.