اسلاید Slick
Slisk یک پلاگین jQuery جهت ایجاد اسلایدر های زیبا می باشد. برای اطلاعات بیشتر اینجا کلیک کنید
<!-- 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
});