How To Use Owl Carousel In Angular 8

In this article, you will learn how to use Owl Carousel in Angular 8.

Introduction

 
In this article, we will learn how we can use the Owl Carousel in Angular 8. Carousel is a slideshow for cycling a series of images or videos. 
 
Prerequisites
  • Knowledge of Angular 2 or higher
  • Visual Studio Code
  • Node and NPM installed
Step 1
 
Create an Angular project by using the following command.
 
ng new owlcarouselinAngular
 
How To Use Owl Carousel In Angular 8
 
Step 2
 
Install Dependencies - Install the required packages by using the following commands.
  1. npm install ngx-owl-carousel --save  
  2. npm install owl.carousel --save  
  3. npm install --save jquery  
Step 3
 
Now, open the angular.json file and add reference to these libraries.
  1. "styles": [  
  2.              "src/styles.css",  
  3.              "./node_modules/owl.carousel/dist/assets/owl.carousel.min.css",  
  4.               "./node_modules/owl.carousel/dist/assets/owl.theme.default.min.css"  
  5.            ],  
  6. "scripts": ["./node_modules/jquery/dist/jquery.min.js",  
  7.              "./node_modules/owl.carousel/dist/owl.carousel.min.js"]  

Step 4

Install boostrap by using the following command. 
 
npm install bootstrap --save

Now, open the styles.css file and add Bootstrap file reference. To add a reference in styles.css file, add this line.

@import '~bootstrap/dist/css/bootstrap.min.css';
 
Step 5
 
Now, expand the src folder and right-click on the Assets folder. Add a new folder under it and rename that to 'Images' and add some demo images to this folder.
 
How To Use Owl Carousel In Angular 8
 
Step 6
 
Configure owlModule in app.module.ts file. Let's import the required module in this file.
 
How To Use Owl Carousel In Angular 8
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3.   
  4. import { AppRoutingModule } from './app-routing.module';  
  5. import { AppComponent } from './app.component';  
  6. import { OwlModule } from 'ngx-owl-carousel';  
  7. @NgModule({  
  8.   declarations: [  
  9.     AppComponent  
  10.   ],  
  11.   imports: [  
  12.     BrowserModule,  
  13.     AppRoutingModule,OwlModule  
  14.   ],  
  15.   providers: [],  
  16.   bootstrap: [AppComponent]  
  17. })  
  18. export class AppModule { }  
Step 7
 
Add the following code in the app.component.ts file.
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent {  
  9.   title = 'owlcarouselinAngular';  
  10.   Images = ['../assets/images/Carousel1.jpeg''../assets/images/Carousel2.jpeg''../assets/images/Carousel3.jpeg'];  
  11.   
  12.   SlideOptions = { items: 1, dots: true, nav: true };  
  13.   CarouselOptions = { items: 3, dots: true, nav: true };  
  14. }  
Step 8
 
Open app.component.html file and add the following lines.
  1. <div class='container-fluid'>    
  2.   <div class="row" style="padding: 20px;">    
  3.       <div class="col-sm-12 btn btn-success">    
  4.        Use Owl Carousel In Angular 8  
  5.       </div>    
  6.   </div>    
  7. <owl-carousel [options]="SlideOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']" >  
  8.   <div class="item" *ngFor="let img of Images">  
  9.   <div style="align-content: center">  
  10.   <img style="height: 260px;width:100%"src={{img}}/>  
  11.   </div>  
  12.   </div>  
  13.   </owl-carousel>  
  14. </div>  
  15. <router-outlet></router-outlet>  
Step 9
 
Now, run the project and check the result.
 
How To Use Owl Carousel In Angular 8
 

Summary

 
In this article, we learned how to implement the Owl Carousel in an Angular 8 project, using a simple step-by-step approach.