Using Slick to build carousel easily

If you need to add beautifull carousel with easy to configure, I think you want Slick. Slick is very useful plugin that use for adding carousel to our website. If you don’t know what is carousel, it’s image, animations, video or html markup slider located in website headers. It’s not also at headers, we can add sliders anywhere we need.

Why you should use this plugin? Here is the Slick’s features

Fully responsive. Scales with its container.
Separate settings per breakpoint
Uses CSS3 when available. Fully functional when not.
Swipe enabled. Or disabled, if you prefer.
Desktop mouse dragging
Infinite looping.
Fully accessible with arrow key navigation
Add, remove, filter & unfilter slides
Autoplay, dots, arrows, callbacks, etc…

If you need more just visit the http://kenwheeler.github.io/slick/ you’ll find some Slicks demo, the documentation, usage, and optional setting. Also you can download the plugin there.

I’ll show simple demo how to use this plugin.

First, you need to download the plugin from official website I tell you before.
And then, extract the archive and place the “slick” forders to your project directory.
Add Slick CSS to you <head>

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

Add the JS before you closing <body>, IMPORTANT: SLick is work with Jquery 1.7+, so load the slick JS file after you load the Jquery, like this

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

Initialize your carousel in your custom javascript file, or inline <script>, you can add custom setting in setting-name : setting value, and for more configuration, visit the official slick website.

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

And finally, you can add the carousel with your custom content with adding class to your <div> element anywhere you need.

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

In your <div> tag you can add image, or others contents. Slick is free and easy to use, with amazing features that you need to build amazing slider, or carousel in your project. Happy learning!

Share this:

Related