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';
  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';
  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'];
  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.