Slick Slide

Content sliders can provide an engaging visual way to showcase your website's unique content. Here's how to use Slick Slider to make a creative content slider. Click here for more features.

<!-- Style -->
<link rel="stylesheet" href="vendors/slick/slick.css" type="text/css">
<link rel="stylesheet" href="vendors/slick/slick-theme.css" type="text/css">

<!-- Javascript -->
<script src="vendors/slick/slick.min.js"></script>
<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>
$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});
Single Item
image
image
image
image 
$('.slick-single').slick();
Autoplay
image
image
image
image 
$('.slick-autoplay').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
});
Fade Effect
image
image
image
image 
$('.slick-fade-effect').slick({
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear'
});
Multiple Items
image
image
image
image
image
image 
$('.slick-multiple').slick({
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4
});
Center Mode
image
image
image
image
image
image 
$('.slick-center-mode').slick({
        centerMode: true,
        centerPadding: '60px',
        slidesToShow: 3,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            }
        ]
    });
Slider Syncing
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image
image 
<div class="slider-for">
  slick items...
</div>
<div class="slider-nav">
  slick items...
</div>
$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
});

$('.slider-nav').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    centerMode: true,
    focusOnSelect: true
});