EN
Tanzania
China
Tunisia
Spain
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
$('.slick-single').slick();Autoplay
$('.slick-autoplay').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000,});Fade Effect
$('.slick-fade-effect').slick({ dots: true, infinite: true, speed: 500, fade: true, cssEase: 'linear'});Multiple Items
$('.slick-multiple').slick({ infinite: true, slidesToShow: 4, slidesToScroll: 4});Center Mode
$('.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
<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});