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