Slick Carousel in Codepen

Slick Carousel is a great little slider script for sliding any kind of content. There are full instructions available on Slick’s website, but it doesn’t explain how to get it to work on Codepen. This post explains how to do this.

Once you’ve followed this post showing you how to get the JavaScript and CSS plugged in to your page, just follow the guidelines on the demo page and the settings page.

Adding the HTML

The slick.js script expects to see a particular HTML structure so that it can work on it. Add something like this to your HTML:

See the Pen Basic Slick code by Hadrian Cawthorne (@hadders) on CodePen.10068

Link to the CSS files

As we’re using Codepen, we can’t upload files to it so we always need to link to files e.g. images and external CSS/JS.

In your pen’s settings, under CSS add the following external CSS files:

//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css

//cdn.jsdelivr.net/jquery.slick/1.5.7/slick-theme.css

So it looks like this:

CSS CDN
CSS CDN

Add the external JavaScript files

We need to link to three different JS files: Two JQuery files and the Slick.js file.

In the pen’s settings under JavaScript, add the following external links:

//code.jquery.com/jquery-1.11.0.min.js

//code.jquery.com/jquery-migrate-1.2.1.min.js

//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js

So it looks like this:

The JS scripts
The JS scripts

Make it so! (initialise the script)

The last thing to do is initialise the scripts in the JS box in Codepen. Here’s what you need to add in:

See the Pen OyZGjE by Hadrian Cawthorne (@hadders) on CodePen.10068

You should now have a working slider. Now add some content into your DIVs – this could be text, images, or anything!

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.