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