Integrate Fully Responsive jQuery Carousel / Slider On Website Using Slick Jquery Plugin

Slick is a fresh powerful jQuery plugin for creating fully customizable, device responsive carousel/slider that work with any html elements. This plugin help you to create super-fast sliding multiple images like sliding your services clients logo or your portfolio images, Following are the some basic features of this plugin.


* Fully responsive. Scales with it’s container.
* Uses CSS3 when available. Fully functional when not.
* Swipe enabled. Or disabled, if you prefer.
* Infinite looping.
* Autoplay, dots, arrows, callbacks, etc.

Integrate Fully Responsive jQuery Carousel / Slider On Website

In below example i am going to create sample basic Carousel / Slider using Slick Jquery Plugin.


Include required CSS+JS libraries on page and don’t forget to include jquery core library before slick.min.js

Add slick.css in your <head>
<link rel="stylesheet" type="text/css" href="">
  <link rel="stylesheet" type="text/css" href="">
Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +)
 <script src="" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src=""></script>


Set up your HTML markup. Wrap your html content under div element which you want to slide.

<div class="slide">
  <div>slide box -1</div>
  <div>slide box -2</div>
  <div>slide box -3</div>
  <div>slide box -4</div>


Call .slick() function on page to make your div element slide while clicking on next and prev link with auto play feature.

$(function() {   
     slidesToShow: 3,
     slidesToScroll: 1,
     autoplay: true,
     autoplaySpeed: 2000,

See live demo and download source code.


You can add more options on your slider to customize slider option as per your need. Go through official documentation

One Reply to “Integrate Fully Responsive jQuery Carousel / Slider On Website Using Slick Jquery Plugin”

  1. Many Thanks, it’s a good job
    Nevertheless, three things are missing to my eyes: keypress navigation, the number of images and lazy loading

    Rodger (French)

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.