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
inside index.html put this inside the head tag
If using angular-cli
Add this to angular-cli.json file
To install this library, run:
$ npm install ngx-owl-carousel --save
and then from your Angular
;;;// Import your library;
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:
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.
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 -->[items]="images"<!-- classes to be attached along with owl-carousel class -->[carouselClasses]="['owl-theme', 'row', 'sliding']">
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.
- To go to next slide. Animation time can be passed as options array. E.g. this.owlElement.next(). (200ms animation time).
- To go to previous slide. (arguments are similar)
- 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.
All callbacks listed in native owl carousel's documentation https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html can be used in options properties.
This project is licensed under the terms of the MIT license.