Ng2-owl-carousel NPM

ng2-owl-carousel

Dependencies

This Library requires jquery to be installed globally

For commonJs based application load jquery 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');

<script type="application/javascript" src="path-to-jquery.js"></script>

If using angular-cli

Add this to angular cli-json file

"scripts": [
"../node_modules/jquery/dist/jquery.js"
]

Installation

To install this library, run:

$ npm install ng2-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 'ng2-owl-carousel';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    OwlModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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>

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.
refresh()
After doing some changes in owl component's options this function can be used to refresh owl component

<owl-carousel #owlElement

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

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


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