Ng2-owl-carousel2 NPM

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

import { Ng2OwlCarouselComponent } from "ng2.owl.carousel";

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

Now go the component where you want to use it. and place your html inside tag

 <ng2-owl-carousel2 (onItemSelect)="onItemSelect($event)"
     useAttributeSelector="boolean value"
     [options]="carouselOptions">
    <!--If attribute selector is  true-->     
    //add carousel-item attribute to the html element. onselect will do nothing in this case
    <div carousel-item><div>
     <!--If attribute selector is  false-->     
     <carousel-item *ngFor="let item of <your item collection>">
     //your item template here
     <carousel-item>
 </ng2-owl-carousel2>

In the typescript file- 1. Import CarouselOptions 2. Declare a variable of type CarouselOptions and then you can access all the properties of owl carousel with nice intellisense.

    import { CarouselOptions } from 'ng2-owl-carousel2';
    
    export class AppComponent {    
    carouselOptions: CarouselOptions;  

    constructor() {    
    this.carouselOptions = new CarouselOptions();

    this.carouselOptions.enableMouseScroll(true)
                        .directionLeftToRight(true);
    
   }
    onItemSelect(carouselItem:any):void{
    //this carousel item can be used anywhere
    }

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

    import { CarouselOptions,MergefitMap } from 'ng2-owl-carousel2';
    
     constructor() {

    this.carouselOptions = new CarouselOptions();

    //first parameter of the constructor is the resolution of the screen and second one is to enable or disable Merge fit option
    let mappings: Array<MergefitMap> =[
      new MergefitMap(678, true),
      new MergefitMap(500, true)
    ] ;

    this.carouselOptions.enableMouseScroll(true)
                        .mergeFit(mappings);
                      

  }

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

    import { CarouselOptions,ScreenResolutionMap } from 'ng2-owl-carousel2';
    
      constructor() {

    this.carouselOptions = new CarouselOptions();

    // Parameters of the constructor
    // screenWidth : Width of the screen
    // itemCount : items to be displayed on that resolution
    // nav : navigation enabled or disapled
    // loop : should loop or not


    let mappings: Array<ScreenResolutionMap> =[
      new ScreenResolutionMap(678, true),
      new ScreenResolutionMap(500, true)
    ] ;

    this.carouselOptions.enableMouseScroll(true)
                        .mergeFit(mappings);
                      

  }

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