Angular 7/6 | Adding Owl Carousel 2 Image and Content Slider in Angular Application with Custom Navigation in 3 Steps

We have already discussed other Image and Content carousel like Slick and Swiper to implement in Angular 6 & 7 version application. Swiper is a very popular carousel which also used with Ionic known as Slides.

In this post, we will discuss another very popular Image/ Content Carousel know as Owl Carousel 2. Owl Carousel 2 is a jQuery plugin with very powerful features like Responsive layout, Autoplay, Auto Width support, a wide number of options to make highly customizable Carousel. You can also check the official website to check various demos.

Here we will implement Owl Carousel 2 with custom Navigation in Angular’s latest version 7. We will use Angular CLI to create new Angular project.

Also, See:
Slick Carousel in Angular 6/7
Swiper Carousel in Angular 6/7
Owl Carousel 2 with Custom Navigation in jQuery


Before we start make sure you have the latest version on Angular CLI installed

Install latest Angular CLI

Create a new project

we have not used routing and styling is CSS.

Install Owl Carousel in Angular Project

Next, we will install the npm package for Owl Carousel and also jQuery dependency.

Run following CLI command to install

As we have installed jQuery and Owl Carousel 2 packages, we will include these libraries in angular.json file

In the app.module.ts file, after importing Owl Module then add in Imports array as shown below

Add Owl Carousel’s directive in the app.component.html file

[options]: will take an object with options for Owl Carousel. You can check more options here

[items]: used if items are dynamically changed. It is the same item object which is provided in *ngFor

In the app.component.ts file, we will add items and options objects.

In the above code, we have custom Navigation HTML added which is optional.

In addition, if you want to change navigation arrows with stylish images, add following CSS in the styles.css file

Find the navigation image in jQuery demo here

Now you can run application in a browser by running

above are screenshots of OwlCarousel 2 in responsive mode.

So by using the above method, you can easily add a responsive Image/ Content Slider in Angular application in a few steps.

Leave a Reply

2 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
2 Comment authors
BassemRyan AR Recent comment authors
newest oldest most voted
Notify of
Ryan AR
Ryan AR

Nice article. Helped me to create my owl carousal.



npm i ngx-owl-carousel–save , for beginner –save should have space like this
npm i ngx-owl-carousel –save