Angular 7 : Adding owl carousel slider in your application

Posted By :Gagan Thakur |29th January 2020

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.

 

 

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


About Author

Gagan Thakur

Frontend Developer with the experience and capabilities to build web applications using technologies like HTML, CSS, Bootstrap and client side scripts like Java Script .

Request For Proposal

Sending message..

Ready to innovate ? Let's get in touch

Chat With Us