<!-- 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
  });
});

$('.slick-single').slick();

$('.slick-autoplay').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
});

$('.slick-fade-effect').slick({
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear'
});

$('.slick-multiple').slick({
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4
});

$('.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
                }
            }
        ]
    });

<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
});