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.
carousel-slider

Features:

* 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.

Libraries

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

<!--CSS 
Add slick.css in your <head>
-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.min.css">
 
<!--JS
Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +)
-->
 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>



HTML

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>
</div>

JS

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

<script>
$(function() {   
 $('.slide').slick({
     slidesToShow: 3,
     slidesToScroll: 1,
     autoplay: true,
     autoplaySpeed: 2000,
  });
});
</script>

See live demo and download source code.

DEMO | DOWNLOAD

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.