I'm trying to integrate slick-carousel in my angular app (unfortunately the angular wrapper is very limited and cannot support our cards/slides design).
JQuery is supported in the app (i.e. writing $(#myId).text('text') will change the corresponding DOM element) but cannot figure out why it doesn't recognize slick.
These are the steps I've follwed after npm install slick-carousel
in angular.json
added 'scripts'
...
"projects": {
"my-app": {
...
"architect": {
"build": {
...
"options": {
...
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/slick-carousel/slick/slick.min.js"
]
},
...
}...
}...
}...
}...
and my component.ts
import * as $ from "jquery";
...
private initSlick(elementId) {
$('#' + elementId).slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
draggable: false
});
}
this result in error
Property 'slick' does not exist on type 'JQuery'. Did you mean 'click'?
184 $('#' + elementId).slick({ node_modules/@types/jquery/JQuery.d.ts:1868:5 1868 click<TData>(eventData: TData, 1869 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, 'click'>): this; 'click' is declared here.
I've also tried:
hard coded id just to make sure
$('#myCarousel').slick({
entering in html
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>
UPDATE
As suggested I've added <any>
before the JQuery call now the project is compiling successfully but I get a runtime error
updated syntax
import * as $ from "jquery";
...
private initSlick(elementId) {
(<any>$('#' + elementId)).slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
draggable: false
});
}
and the runtime error: query__WEBPACK_IMPORTED_MODULE_2__(...).slick is not a function
Please help with:
- Advice on solving the problem OR
- link to tutorial on creating a slide effect in order to try and implement the slide myself
Cheers.