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