Angular 7 : Adding owl carousel slider in your application

In this blog, 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, auto-play, auto-width support, a wide number of options to make a highly customisable carousel.

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

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

Install latest Angular CLI

$ npm install -g @angular/cli

Create a new project

$ ng new Ng7OwlCarousel2Demo

$ cd Ng7OwlCarousel2Demo

we have not used routing and not even styling is CSS.

Install Owl Carousel in Angular Project

Next, need to install the npm package for owl carousel with jQuery dependency.

Run following CLI command to install

$ npm install jquery --save

$ npm i ngx-owl-carousel--save

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

...
...

    "styles": [

      "src/styles.css",

      "./node_modules/owl.carousel/dist/assets/owl.carousel.css",

      "./node_modules/owl.carousel/dist/assets/owl.theme.default.css"

    ],

    "scripts": [

      "./node_modules/jquery/dist/jquery.js",

      "./node_modules/owl.carousel/dist/owl.carousel.js"

    ],

...

...

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

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Import your library

import { OwlModule } from 'ngx-owl-carousel';

    @NgModule({

      declarations: [

        AppComponent

      ],

      imports: [

        BrowserModule,

        OwlModule

      ],

      providers: [],

      bootstrap: [AppComponent]

    })

    export class AppModule { }

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

<owl-carousel [options]="carouselOptions" [items]="images" [carouselClasses]="['owl-theme', 'row', 'sliding']">

<div class="item" *ngFor="let image of images;let i= index">

<img class="slide-image" src="{{image.image}}" >

<div class="slide-text">

<h4>{{image.text}}</h4>

</div>

</div>

</owl-carousel>

[options]: will take an object with options for owl carousle. 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.

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'OwlCarousel2 in Angular7 with Custom Navigation Arrows';

  carouselOptions = {

    margin: 25,

    nav: true,

    navText: ["

", "

"], responsiveClass: true,

 responsive: { 

0: { items: 1, nav: true }, 

600: { items: 1, nav: true }, 

1000: { items: 2, nav: true }, 

1500: { items: 3, nav: true} 

}

 } images = [ 

{ text: "1", image: "../images/1a.jpg" },

{ text: "2", image: "../images/2a.jpg" },

{ text: "3", image: "../images/3a.jpg" },

{ text: "4", image: "../images/4a.jpg" },

{ text: "5", image: "../images/5a.jpg" },

{ text: "7", image: "../images/7a.jpg" },

{ text: "8", image: "../images/8a.jpg" },

{ text: "9", image: "../images/9a.jpg" },

{ text: "10", image: "../images/10a.jpg" }

]

}

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

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

.owl-carousel {

  width: 90% !important;

  margin: 10% auto;

}

.owl-carousel .owl-nav {

  overflow: hidden;

  height: 0px;

}

.owl-carousel .nav-btn {

  height: 47px;

  position: absolute;

  width: 26px;

  cursor: pointer;

  top: 30% !important;

}

.owl-carousel .owl-prev.disabled,

.owl-carousel .owl-next.disabled {

  pointer-events: none;

  opacity: 0.2;

}

.owl-carousel .prev-slide {

  background: url(./assets/images/nav-icon.png) no-repeat scroll 0 0;

  left: -33px;

}

.owl-carousel .next-slide {

  background: url(./assets/images/nav-icon.png) no-repeat scroll -24px 0px;

  right: -33px;

}

.owl-carousel .prev-slide:hover {

  background-position: 0px -53px;

}

.owl-carousel .next-slide:hover {

  background-position: -24px -53px;

}

Now you can run application in a browser by running

$ ng serve --open

above are screenshots of owl carousel 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.

------------------------------------------------------------------------------------------------------------------------------------------------------