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

1npm install script-loader

and in vendor.ts

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

OR

inside index.html put this inside the head tag

1<script type="application/javascript" src="/node_modules/jquery/dist/jquery.js"></script>
2<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

1"scripts": [
2    "../node_modules/jquery/dist/jquery.js",
3    "../node_modules/owl.carousel/dist/owl.carousel.js"
4]

Installation

To install this library, run:

1$ npm install ngx-owl-carousel --save

and then from your Angular AppModule:

1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3
4import { AppComponent } from './app.component';
5
6// Import your library
7import { OwlModule } from 'ngx-owl-carousel';
8
9@NgModule({
10  declarations: [
11    AppComponent
12  ],
13  imports: [
14    BrowserModule,
15    OwlModule
16  ],
17  providers: [],
18  bootstrap: [AppComponent]
19})
20export class AppModule { }

Import required css files

Include these two css files

1. owl.carousel.css file This is required css files.

2. 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:

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

OR include these files in main scss file.

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

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

1    <link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css">
2    <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:

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

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.

1<owl-carousel #owlElement
2

1import {OwlCarousel} from 'ngx-owl-carousel';
2
3export class HomeComponent {
4@ViewChild('owlElement') owlElement: OwlCarousel
5
6
7   fun() {
8     this.owlElement.next([200])
9     //duration 200ms
10   }
11}

Callbacks

All callbacks listed in native owl carousel's documentation https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html can be used in options properties.

Callbacks list:

• onInitialize
• onInitialized
• onResize
• onResized
• onDrag
• onDragged
• onTranslate
• onTranslated
• onChange
• onChanged
• onLoadLazy
• onLoadedLazy
• onPlayVideo
• onStopVideo

License

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