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:

[codepen_embed height=”212″ theme_id=”10068″ slug_hash=”JYvVJR” default_tab=”html” user=”hadders”]See the Pen <a href=’http://codepen.io/hadders/pen/JYvVJR/’>Basic Slick code</a> by Hadrian Cawthorne (<a href=’http://codepen.io/hadders’>@hadders</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

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:

[codepen_embed height=”190″ theme_id=”10068″ slug_hash=”OyZGjE” default_tab=”js” user=”hadders”]See the Pen <a href=’http://codepen.io/hadders/pen/OyZGjE/’>OyZGjE</a> by Hadrian Cawthorne (<a href=’http://codepen.io/hadders’>@hadders</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

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

Post Views: 2,240