Ngx-owl-carousel NPM

ngx-owl-carousel

Dependencies

This Library requires jquery and owl.carousel to be installed globally

For commonJs based application load jquery and owl.carousel using script loader or use link tag in html file

Install script-loader if you don't have already

npm install script-loader

and in vendor.ts

require('script!jquery');
require('script!owl.carousel');

inside index.html put this inside the head tag

<script type="application/javascript" src="/node_modules/jquery/dist/jquery.js"></script>
<script type="application/javascript" src="/node_modules/owl.carousel/dist/owl.carousel.js"></script>

If using angular-cli

Add this to angular-cli.json file

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/owl.carousel/dist/owl.carousel.js"
]

Note: There is a known bug in original owl.carousel.js file when using {loop: true} option. Therefore a fixed version of owl.carousel.js has been included in js folder. In case you are using loop in your carousel your scripts block should look like this instead.

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/ngx-owl-carousel/js/owl.carousel.js"
]

Installation

To install this library, run:

$ npm install ngx-owl-carousel --save

and then from your Angular AppModule:

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 { }

Import required css files

Include these two css files

owl.carousel.css file This is required css files.
owl.theme.default file This file is optional. However to use default navigation controls or dots buttons this file is necessary.

Inside angular-cli.json add these lines:

"styles": [
    "../node_modules/owl.carousel/dist/assets/owl.carousel.css",
    "../node_modules/owl.carousel/dist/assets/owl.theme.default.css"
]

OR include these files in main scss file.

import "~owl.carousel/dist/assets/owl.carousel.css";
import "~owl.carousel/dist/assets/owl.theme.default.css";

OR include these files in index.html file inside head tag.

    <link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.theme.default.min.css">

Once your library is imported, you can use OwlCarousel component very easily in your Angular application:

<!-- You can use owl-carousel selector to include its component -->
 <owl-carousel
     [options]="{items: 3, dots: false, navigation: false}"
     <!-- If images array is dynamically changing pass this array to [items] input -->
     [items]="images"
     <!-- classes to be attached along with owl-carousel class -->
     [carouselClasses]="['owl-theme', 'row', 'sliding']">
     <div class="item" *ngFor="let image of images;let i = index">
         <div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}"></div>
     </div>
 </owl-carousel>

Note: Please remove comments from the above example else you will get errors.

Angular Universal Integration

This package is a wrapper for the jquery library owl.carousel. Jquery is not supported in Angular Universal currently. Therefore the carousel cannot be rendered server side. However if you are using angular universal, do not include owl.carousel ("/node_modules/owl.carousel/dist/owl.carousel.js") in server side configuration.

APIs

next(options?: any[])
- To go to next slide. Animation time can be passed as options array. E.g. this.owlElement.next(200). (200ms animation time).
previous(options?: any[])
- To go to previous slide. (arguments are similar)
to(options?: any[])
- To go to nth slide. (arguments are similar)
trigger(action: string, options?: any[])
- To trigger any jquery owl carousel's action. options can be passed accordingly.

<owl-carousel #owlElement

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

export class HomeComponent {
@ViewChild('owlElement') owlElement: OwlCarousel


   fun() {
     this.owlElement.next([200])
     //duration 200ms
   }
}