How to Set Up Slick Slider (with arrows)

Being a developer I personally hate slider plugins. In my opinion they give you so many options that you end up not being able to maintain without having to do all kinds of magic.

They are supposed to make it easy for the end user, the non-technical WordPress blogger looking to maintain their site themselves, but it ends up being overkill as it seeks to provide hundreds of options that sliders really shouldn't have.

That's why I prefer the Slick Slider carousel plugin by Ken Wheeler. Not the "plugin" that you install and activate, but the library itself.

Let me show you how to set it up:

How Do I Install It

I always prefer to pull the files into my project. That way I have complete control to customize and 100% uptime. There is a simple CDN option and NPM as well.

1. Place the files in your project

Go to the website, click on Get It Now, and that will shoot you down to a Download button. Download the files.

Go to the Slick folder and choose either the minified slick.min.js file or if you are using a task manager like Gulp then just choose slick.js and put it in your Gulp process to be minified.

Next, you want to add the slick and slick-theme stylesheets to your project. If you are using Sass, then grab the slick.scss and slick-theme.scss and drop it in your Gulp process (or Grunt, Webpack, etc.). If you are not, the grab the regular CSS versions. Be sure to reference/enqueue them so your project recognizes them.

2. Add the fonts folder

Take the ajax-loader.gif and drag it to the provided fonts folder. Then add the fonts folder to your project. Add it in, or someone close to, where you put the slick slider stylesheets/script files so you can reference it easily.

3. Tweak the files

If you open up slick-theme.css or slick-theme.scss, you will see that the fonts folder is being referenced. In the font-face with css (src: url('./fonts/slick.eot')) and in variables with scss($slick-font-path: "./fonts/" !default;).

You will also see that the ajax-loader.gif is being referenced with a relative path.

You will need to adjust these paths depending on where you placed your fonts folder.

How Do I Use It

Many ways!. Here's a simple example.

Say I want to have a slideshow of three photos. In my html I can put something like:

<div id="homepage-slider">
    <div class="slider-hero">
        <div>
            <img src="/images/2019/12/stock-photo.jpg" />
        </div>
        <div>
            <img src="/images/2019/12/stock-photo.jpg" />
        </div>
        <div>
            <img src="/images/2019/12/stock-photo.jpg" />
        </div>
    </div>
</div>

That gives me my three photos on the page.

Now I need to use JS to initialize the slider functionality like (and do this in a separate JS file. Create one called custom.js or something like that, and be sure to reference/enqueue the file):

(function($) {
    $(document).ready(function() {
        $('.slider-hero').slick({
            dots: true,
            infinite: true,
            cssEase: 'linear',
            swipe: false,
        });
    });
	
})( jQuery );

See how I am targeting that slider-hero class?

And the options like dots, infinite, etc. are just slider options and these are all explained in the documentation, along with further options like filtering, syncing, etc.

Where Are My Slick Slider Arrows?

Slick slider provides you with some arrows. You'll find these on line 91 and 95 of slick-theme.css or as a variable in slick-theme.scss.

These look bad. I never liked them. Thus, I went out and found much better replacements arrows.

Here they are for you to use as well:

Next arrow
Previous arrow

So upload these SVG arrows to your project. Then jump back to your slick-theme.scss or slick-theme.css and replace the arrows in the pseudoclass with these instead.

Conclusion

So that's how you can set up Slick Slider in your next project. It's simple, lightweight, and can do 99% of what you'll need with a slider without all the bload and confusion that you find out there with other plugins. Enjoy.