In this tutorial, I am going to show you how to integrate Owl Carousel 2 in your Angular app. The ngx-owl-carousel-o library is going to help us create an Image slider in Angular. You can see a preview of this slider from here.
Angular CLI installed on our system
To continue with this tutorial you should have installed Angular CLI in your pc. If not run below command in your terminal
npm install -g @angular/cli
Create Angular Project
I am going to implement this carousel in a new project. So, to create new Angular project run below command in your terminal
ng new angular-owl-carousel-example
Now get in to the newly created Angualr application by running below command in your terminal:
Start your app in the browser with below command:
ng serve --open
Install Owl Carousel Plugin
Now we need to install the owl carousel package in Angular application. So head over to your command prompt and execute the following command:
npm install ngx-owl-carousel-o
Add Carousel Module & BrowserAnimations Module
In order to bring Owl Carousel in action in our Angular application, we need to import and register CarouselModule and BrowserAnimationsModule services in the main app module class.
CarouselModeule allow you to use the Owl Carousel in Angular whereas BrowserAnimationsModule profoundly enables the animation service for you.
In this tutorial, I showed you how to intergrade Owl Carousel in Angular. To knowing more about the owl carousel, you can check out their documentation here. You can find the source code of this application from here.