ng2-owl-carousel2
This is not a official distribution of owl carousel 2 Owl Carosel for Angular 2+
Installation
Run this command to install this library
npm install ng2-owl-carousel2
Dependencies
This library needs jquery and owl carousel library
import jquery globally as per your type of your project.
import owlcarousel library after importing jquery
How to use
Import and add this component to the declaration section
;
Now go the component where you want to use it. and place your html inside tag
<!--If attribute selector is true--> //add carousel-item attribute to the html element. onselect will do nothing in this case <!--If attribute selector is false--> //your item template here
In the typescript file-
- Import CarouselOptions
- Declare a variable of type CarouselOptions and then you can access all the properties of owl carousel with nice intellisense.
;
APIs
- setAutoHeight(enable: boolean)-- Set auto height
- setAutoWidth(enable: boolean)-- set auto width
- enableAutoPlay(autoPlay?: boolean, autoplayTimeout?: number, autoplayHoverPause?: boolean)-- Enables auto play
- enableLazyLoading(enable: boolean)-- Enables lazy loading of images
- allowMerge(enable: boolean, mapping: Array)-- To use this feature import MergefitMap class along with CarouselOptions and pass an array of mapping
; constructor
- enableMouseScroll(enable: boolean)-- Enables mouse scroll on carousel.
- makeResponsive(enable: boolean, mapping: Array)-- To use this feature import ScreenResolutionMap class along with CarouselOptions and pass an array of mapping
; constructor
- directionRightToLeft(enable: boolean)-- Direction in whichc carousel items will move
- directionLeftToRight(enable: boolean)-- Direction in whichc carousel items will move
- onItemSelect event-- onItemSelect will be fired whenever any item will be seleted
All these methods are chainnable
License
MIT