How to install Slick Carousel using NPM and Gulp?

Question

I can't find any documentation on this, besides npm install slick-carousel on npm website. I don't have much experience with installing plugins this way, so if anyone could lend me a hand, that be great.

This is what I've gathered so far:

• I install jquery via npm, so that the slick-carousel could run and I install it with npm install jquery --save, so that (from what I've gathered) it's included in dependencies in my package.json file.
• Then I install slick carousel in the same way, using npm install slick-carousel --save

But then what? I've seen people saying I need to require/import some files in my global.js and style.scss files too, but I can't seem to figure which ones or how? Nothing I add works.

Can someone please either give me a quick rundown for this or point me in the right direction where to read it because I'm honestly lost?

Thank you!

Kauffmann

Answer 1

They are talking about a bundle process you can do with your files. If you are new to this concept, you can imagine that Gulp (I understand that you are using it) can take a handful of files, modify them, and compile them into something much more elaborate: something like compiling your scss or less files in css, or make you use the newer versions of javascript and transpile it into code compatible with less current browsers. You can start from here if you are interested

https://css-tricks.com/gulp-for-beginners/

In the case of slick carousel, this is what you can do:

Scripts

import $ from 'jquery'
import 'slick-carousel'
    
window.jQuery = window.$ = $; 

Styles

In my assets folder, I copy assets from node_modules inside a project directory:

slick
|_fonts 
|_ajax-loader.gif 
|_slick.scss / .less
|_slick-theme.scss / .less

This is because I then can easly import them inside my project, customizing as needed

@import 'components/slick/slick';
@import 'components/slick/slick-theme'; // if you need default theme

Inizialize

$('.carousel-selector').slick({
    //options
});

One finally note: the npm package slick-carousel is outdated (ver 1.8.1)if you need the 1.9 you can find it in npm package slick-carousel-latest. In this case, the first part of the scripts sections become:

import $ from 'jquery'
import 'slick-carousel-latest'

window.jQuery = window.$ = $; 

I hope this helps, cheers!

Stipend