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:

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:

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!
Recent Comments