How to Integrate Owl Carousel-O in Angular 16 Application

Last Updated on by in Angular

In this tutorial, we will understand the profound technique to integrate Owl Carousel 2 in the Angular app. The ngx-owl-carousel-o library is going to help us create an Image slider in Angular.

Owl Carousel is a notable jQuery based library especially used for developing responsive and customizable carousels or sliders on front-end web applications. It offers a user-friendly, intuitive and interactive way to show images, videos, and other content in a sliding format.

As per their official document, Owl Carousel offers robust features:

Touch and Drag Support: It supports touch gestures and drag interactions, allowing users to swipe through the carousel on touchscreen devices.

Navigation Controls: Owl Carousel provides customizable navigation controls, such as prev/next buttons, pagination dots, and navigation thumbnails, to navigate through the carousel.

Responsive Design: Owl Carousel automatically adjusts the size and layout of the carousel based on the screen size, making it suitable for different devices such as desktops, tablets, and mobile phones.

AutoPlay: You can configure the carousel to automatically play the slides in a predefined sequence. You can set options like autoplay speed, delay, and whether to pause on hover.

Customizable Transitions: Owl Carousel offers various transition effects for the slides, such as slide, fade, zoom, and flip. You can also customize the transition speed and easing.

Lazy Loading: It supports lazy loading, which means that images and other media are loaded only when they are about to be displayed, improving page load times and performance.

Callback Functions: Owl Carousel provides callback functions that allow you to execute custom code when specific events occur, such as when a slide changes or when the carousel is initialized.

To use Owl Carousel, you need to include the necessary package and CSS files in your Angular application, It successfully initializes the carousel with the desired options, and structure your Angular HTML markup accordingly.

Read more: Add Custom Next and Previous Arrows in Owl Carousel 2

Create Angular Project

The first step invokes with installing a fresh new angular application installation, but for that, we must have angular CLI installed on our system.

npm install -g @angular/cli

Execute the command to install the angular application:

ng new angular-owl-carousel-example

Get into the project root:

cd angular-owl-carousel-example

Intall Owl Carousel Plugin

Additionally, install the owl carousel package in Angular application. So head over to the command prompt and execute the following command.

npm install ngx-owl-carousel-o

Add CarouselModule & BrowserAnimationsModule in AppModule

In order to bring Owl Carousel in action in Angular, we need to import and register CarouselModule and BrowserAnimationsModule services in the main app module class.

CarouselModule lets you use the Owl Carousel in Angular whereas BrowserAnimationsModule profoundly enables the animation service for you.

Add the following code in the app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CarouselModule } from 'ngx-owl-carousel-o';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CarouselModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

Add Carousel Styles

Open the angular.json file and move to styles array and add the following owl carousel styling CSS paths.

...
...
...
"styles": [
  "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
  "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",              
  "src/styles.css"
],
...
...
...

Additionally you can add the following imports in src/styles.scss:

@import 'ngx-owl-carousel-o/lib/styles/scss/owl.carousel';
@import 'ngx-owl-carousel-o/lib/styles/scss/owl.theme.default';

Creating Owl Carousel in Angular

Let’s profoundly have a look; it is as simple as applying butter on bread.

We are using a default app component; however, you can generate a separate component and start implementing the carousel if you want.

Place the below code in the app.component.ts file.

import { Component } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  constructor() { }

  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 600,
    navText: ['&#8249', '›'],
    responsive: {
      0: {
        items: 1 
      },
      400: {
        items: 2
      },
      760: {
        items: 3
      },
      1000: {
        items: 4
      }
    },
    nav: true
  }

}

Next up, we have to add the HTML code into the angular HTML template; it is the carousel’s skeleton. So, without further ado, add the code in the app.component.html file.

<h2 class="mb-5">Angular Dynamic Owl Carousel Example</h2>
<owl-carousel-o [options]="customOptions">
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/92c952" alt="img 1" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/771796" alt="img 2" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/24f355" alt="img 3" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/d32776" alt="img 4" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/f66b97" alt="img 5" />
    </div>
  </ng-template>
  <ng-template carouselSlide>
    <div class="slide">
      <img src="https://via.placeholder.com/600/56a8c2" alt="img 6" />
    </div>
  </ng-template>
</owl-carousel-o>

Here is the output that you will see in the browser:

Angular 12 Owl Carousel 2 Demo

Creating Dynamic Slides in Angular

Prevously i showed you a simple example, It has has been in practice from the primordial time. Let’s see a bit of an advanced example. We will use *ngFor directive to generate slides in angular dynamically.

Define the dynamic slides array and add the images with id and image alt.

import { Component } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  dynamicSlides = [
     {
       id: 1,
       src:'https://via.placeholder.com/600/92c952',
       alt:'Side 1',
       title:'Side 1'
     },
     {
       id: 2,
       src:'https://via.placeholder.com/600/771796',
       alt:'Side 2',
       title:'Side 2'
     },
     {
       id: 3,
       src:'https://via.placeholder.com/600/24f355',
       alt:'Side 3',
       title:'Side 3'
     },
     {
       id: 4,
       src:'https://via.placeholder.com/600/d32776',
       alt:'Side 4',
       title:'Side 4'
     },
     {
       id: 5,
       src:'https://via.placeholder.com/600/f66b97',
       alt:'Side 5',
       title:'Side 5'
     }
   ]
 
   constructor() { }

  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 600,
    navText: ['&#8249', '&#8250;'],
    responsive: {
      0: {
        items: 1 
      },
      400: {
        items: 2
      },
      760: {
        items: 3
      },
      1000: {
        items: 4
      }
    },
    nav: true
  }

}

Subsequently, add the owl-carousel-o directive to initialize the image slides. You can see ngFor directive iterates over the image array. The sense of profoundness and easiness is there to implement the image slider in angular with owl carousel.

<owl-carousel-o [options]="customOptions">

  <ng-container *ngFor="let slide of dynamicSlides">
    <ng-template carouselSlide [id]="slide.id">
      <img [src]="slide.src" [alt]="slide.alt" [title]="slide.title">
    </ng-template>
  </ng-container>

</owl-carousel-o>

Owl Carousel Custom Events

There are couple of events and methods that spruce up the Angular owl carousel functinality.

translated

The translated event triggers right after the carousel completes the translating and exposes the object of the type SlidesOutputData.

<owl-carousel-o [options]="customOptions" (translated)="getPassedData($event)">

  <ng-container *ngFor="let slide of dynamicSlides">
    <ng-template carouselSlide [id]="slide.id">
      <img [src]="slide.src" [alt]="slide.alt" [title]="slide.title">
    </ng-template>
  </ng-container>

</owl-carousel-o>

The code for adding translated event is the following:

import { Component } from '@angular/core';
import { SlidesOutputData, OwlOptions } from 'ngx-owl-carousel-o';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {
  activeSlides?: SlidesOutputData;

  getPassedData(data: SlidesOutputData) {
    this.activeSlides = data;
    console.log(this.activeSlides);
  }

  dynamicSlides = [
    {
      id: 1,
      src: 'https://via.placeholder.com/600/92c952',
      alt: 'Side 1',
      title: 'Side 1',
    },
    {
      id: 2,
      src: 'https://via.placeholder.com/600/771796',
      alt: 'Side 2',
      title: 'Side 2',
    },
    {
      id: 3,
      src: 'https://via.placeholder.com/600/24f355',
      alt: 'Side 3',
      title: 'Side 3',
    },
    {
      id: 4,
      src: 'https://via.placeholder.com/600/d32776',
      alt: 'Side 4',
      title: 'Side 4',
    },
    {
      id: 5,
      src: 'https://via.placeholder.com/600/f66b97',
      alt: 'Side 5',
      title: 'Side 5',
    },
  ];

  constructor() {}

  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 600,
    navText: ['&#8249', '&#8250;'],
    responsive: {
      0: {
        items: 1,
      },
      400: {
        items: 2,
      },
      760: {
        items: 3,
      },
      1000: {
        items: 4,
      },
    },
    nav: true,
  };
}

dragging

The event dragging is called right after the user begins dragging the carousel.

<owl-carousel-o [options]="customOptions" (dragging)="startDragging($event.dragging)">

  <ng-container *ngFor="let slide of dynamicSlides">
    <ng-template carouselSlide [id]="slide.id">
      <img [src]="slide.src" [alt]="slide.alt" [title]="slide.title">
    </ng-template>
  </ng-container>

</owl-carousel-o>
...
...
...
  startDragging(event){
    console.log(event);
  }
...
...
...

initialized

It is called right after the carousel gets initialized and reveals the object of the type SlidesOutputData.

<owl-carousel-o [options]="customOptions" (initialized)="getData($event)">

  <ng-container *ngFor="let slide of dynamicSlides">
    <ng-template carouselSlide [id]="slide.id">
      <img [src]="slide.src" [alt]="slide.alt" [title]="slide.title">
    </ng-template>
  </ng-container>

</owl-carousel-o>
import { SlidesOutputData, OwlOptions } from 'ngx-owl-carousel-o';

...
...
...
getData(data: SlidesOutputData) {
    console.log(data);
}
...
...
...

Start the app in the browser with below command:

ng serve --open

Summary

Eventually, we have completed the Angular 12 Owl Carousel tutorial. In this tutorial, we saw how to implement a simple and dynamic carousel in Angular.

We also threw light on the owl carousel events and methods for knowing more about the owl carousel; you can check out their documentation here.