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