Install Slick Slider with NPM into Webpack Project

The big appeal of npm was that you could install some functionality quickly and easily directly into your project by running a single command from your command line. Cutting out the copy/paste juggling act you need to perform when you manually download a library via zip file to your downloads folder. Then unzip and copy files into your project folder. This process is tedious and prone to error.

Using npm streamlines this process. Here we look at installing slick slider into you’re webpack project using npm.

npm install slick-carousel

Move slick to a public folder

When slick slider is installed it will install into node_modules. We can move it out of there and move it into your project directory. My projects don’t require the node_modules folder to be deployed. This is a bit of a hassle but I’ve learned to live with it.

mv -rf node_modules/slick-carousel src/js/

Import slick from your index.js

Now use your index.js to import slick slider from its new location

import "./js/slick-carousel/slick/slick";
import "./js/slick-carousel/slick/slick.scss";
import "./js/slick-carousel/slick/slick-theme.scss";

Create your custom script to initialise

This file should contain the init script for slick slider. This is where you can specify you custom slider properties.

touch "my-slick.js"

Import custom slick init into your index.js

Import your slick init script . This script should be loaded after the slick library script mentioned previously.

import "./js/my-slick";

Slick Slider Example Code

Here’s a list of some handy slick slider examples I often use as a reference or starting point.

slick example