Ionic2 How to use JQuery Plugin in Page

Question

I\'m a newbie of ionic 2, i create project and need to jquery plugin link colorbox, slick-carousel...

I\'ve run the command in a terminal

npm install         


        

Answer 1

Since slick-carousel doesn't have any exported modules (it just adds chainable functions onto jQuery) the method for importing it is different. Here's a minimal example:

// app/pages/carousel/carousel.ts
import { Component } from "@angular/core";
import { NavController } from "ionic-angular";
import * as $ from "jquery";
import "slick-carousel";

@Component({
    templateUrl: "build/pages/carousel/carousel.html"
})
export class CarouselPage {

    constructor(public nav: NavController) {}

    ionViewLoaded() {
        $(".myCarousel").slick();
    }
}

Note that we add the carousel initialization to the ionViewLoaded() event handler to make sure the DOM is loaded. And then the template:

  
    
  
  Carousel



  

    
Item 1
    
Item 2
    
Item 3
  

And finally, makes sure you import the CSS by adding this to your app/theme/app.core.scss file:

@import "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css";

Have fun!