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.

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

<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">
 

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

="slide">
  
>slide box -1
>
  
>slide box -2
>
  
>slide box -3
>
  
>slide box -4
>
>

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.

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

Related