noc

ng2-owl-carousel

An angular2 (4) wrapper for jquery owl-carousel library with dynamic carousel item change detection

Showing:

Popularity

Downloads/wk

70

GitHub Stars

70

Maintenance

Last Commit

3yrs ago

Contributors

1

Package

Dependencies

2

Size (min+gzip)

12.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Deprecated!
This package has been renamed to ngx-owl-carousel. Please install using npm install ngx-owl-carousel --save instead.

Readme

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');

OR

<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

  1. 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).

  2. previous(options?: any[])

    To go to previous slide. (arguments are similar)

  3. to(options?: any[])

    To go to nth slide. (arguments are similar)

  4. trigger(action: string, options?: any[])

    To trigger any jquery owl carousel's action. options can be passed accordingly.

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

License

This project is licensed under the terms of the MIT license.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100