Angular 8/7 Adding Owl Carousel 2 Image and Content Slider in Angular Application with Custom Navigation in 3 Steps

We have already discussed other Image and Content carousel-like Slick and Swiper to implement in Angular application. Swiper is a very popular carousel which also used with Ionic known as Slides.

 

 

Update: This library is not supported by the latest Angular version. You can check this latest Owl Carousel 2 for Angular without using jQuery.

 

 

 

 

 

In this post, 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, Autoplay, Auto Width support, a wide number of options to make highly customizable Carousel. You can also check the official website to check various demos.

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

Also, See:
Slick Carousel in Angular 6/7
Swiper Carousel in Angular 6/7
Owl Carousel 2 with Custom Navigation in jQuery

 

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

Install latest Angular CLI

$ npm install -g @angular/cli

Create a new project

$ ng new NgOwlCarousel2Demo
$ cd NgOwlCarousel2Demo

we have not used routing and styling is CSS.

Install Owl Carousel in Angular Project

Next, we will install the npm package for Owl Carousel and also jQuery dependency.

Run following CLI command to install

$ npm install jquery --save
$ npm i ngx-owl-carousel --save

As we have installed jQuery and Owl Carousel 2 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 Carousel. 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: ["<div class='nav-btn prev-slide'></div>", "<div class='nav-btn next-slide'></div>"],
    responsiveClass: true,
    responsive: {
      0: {
        items: 1,
        nav: true
      },
      600: {
        items: 1,
        nav: true
      },
      1000: {
        items: 2,
        nav: true,
        loop: false
      },
      1500: {
        items: 3,
        nav: true,
        loop: false
      }
    }
  }

  images = [
    {
      text: "Everfresh Flowers",
      image: "https://freakyjolly.com/demo/jquery/PreloadJS/images/1.jpg"
    },
    {
      text: "Festive Deer",
      image: "https://freakyjolly.com/demo/jquery/PreloadJS/images/2.jpg"
    },
    {
      text: "Morning Greens",
      image: "https://freakyjolly.com/demo/jquery/PreloadJS/images/3.jpg"
    },
    {
      text: "Bunch of Love",
      image: "https://freakyjolly.com/demo/jquery/PreloadJS/images/4.jpg"
    },
    {
      text: "Blue Clear",
      image: "https://freakyjolly.com/demo/jquery/PreloadJS/images/5.jpg"
    },
    {
      text: "Evening Clouds",
      image: "https://freakyjolly.com/demo/jquery/PreloadJS/images/7.jpg"
    },
    {
      text: "Fontains in Shadows",
      image: "https://freakyjolly.com/demo/jquery/PreloadJS/images/8.jpg"
    },
    {
      text: "Kites in the Sky",
      image: "https://freakyjolly.com/demo/jquery/PreloadJS/images/9.jpg"
    },
    {
      text: "Sun Streak",
      image: "https://freakyjolly.com/demo/jquery/PreloadJS/images/10.jpg"
    }
  ]



}

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

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

.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;
}

Find the navigation image in jQuery demo here

Now you can run the application in a browser by running

$ ng serve --open

 

 

Update: This library is not supported by the latest Angular version. You can check this latest Owl Carousel 2 for Angular without using jQuery.

 

 

 

 

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

Subscribe
Notify of
guest
3 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
andre mendes

YOU ARE A GOD!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Bassem

npm i ngx-owl-carousel–save , for beginner –save should have space like this
npm i ngx-owl-carousel –save

Ryan AR

Nice article. Helped me to create my owl carousal.

Thanks