Slick carousel

Fully responsive carousel plugin. For more information read the plugin documentation

// 3 elements with dots
.carousel-3-dots.mx-2.mb-9.mt-2
	.card.border.border-white.bg-primary.py-8
	.card.border.border-white.bg-primary.py-8
	.card.border.border-white.bg-primary.py-8
	.card.border.border-white.bg-primary.py-8
	.card.border.border-white.bg-primary.py-8
	.card.border.border-white.bg-primary.py-8
<!-- 3 elements with dots -->
<div class="carousel-3-dots mx-2 mb-9 mt-2">
	<div class="card border border-white bg-primary py-8"></div>
	<div class="card border border-white bg-primary py-8"></div>
	<div class="card border border-white bg-primary py-8"></div>
	<div class="card border border-white bg-primary py-8"></div>
	<div class="card border border-white bg-primary py-8"></div>
	<div class="card border border-white bg-primary py-8"></div>
</div>
$('.carousel-3-dots').slick({
	slidesToShow:   3,
	slidesToScroll: 2,
	infinite: true,
	dots: true,
	autoplaySpeed: 3000,
	lazyLoad: 'ondemand',
	dotsClass: 'slick-dots',
	arrows: false,
	responsive: [
		{
		breakpoint: 992,
		settings: {
			slidesToShow: 2,
			slidesToScroll: 1
			}
		},
		{
		breakpoint: 768,
		settings: {
			slidesToShow: 1,
			slidesToScroll: 1
			}
		},
		{
		breakpoint: 576,
		settings: {
			slidesToShow: 1,
			slidesToScroll: 1
			}
		}
	]
});
// 1 element with arrows
.carousel-1-arrows.mx-2.mb-2.mt-2
	.card.border.border-white.bg-primary.py-16
	.card.border.border-white.bg-primary.py-16
	.card.border.border-white.bg-primary.py-16
<!-- 1 element with arrows-->
<div class="carousel-1-arrows mx-2 mb-2 mt-2">
	<div class="card border border-white bg-primary py-16"></div>
	<div class="card border border-white bg-primary py-16"></div>
	<div class="card border border-white bg-primary py-16"></div>
</div>
$('.carousel-1-arrows').slick({
	slidesToShow:   1,
	slidesToScroll: 1,
	infinite: true,
	dots: false,
	arrows: true,
	autoplay: false,
	autoplaySpeed: 3000,
	lazyLoad: 'ondemand',
	responsive: [
		{
		breakpoint: 992,
		settings: {
			slidesToShow: 1,
			slidesToScroll: 1
			}
		},
		{
		breakpoint: 768,
		settings: {
			slidesToShow: 1,
			slidesToScroll: 1,
			arrows: false,
			autoplay: true
			}
		},
		{
		breakpoint: 576,
		settings: {
			slidesToShow: 1,
			slidesToScroll: 1,
			arrows: false,
			autoplay: true
			}
		}
	]
});
// 6 elements with autoplay
.carousel-6.mx-2.mb-2.mt-2
	.card.border.border-white.bg-primary.py-8
	.card.border.border-white.bg-primary.py-8
	.card.border.border-white.bg-primary.py-8
	.card.border.border-white.bg-primary.py-8
	.card.border.border-white.bg-primary.py-8
	.card.border.border-white.bg-primary.py-8
	.card.border.border-white.bg-primary.py-8
	.card.border.border-white.bg-primary.py-8
	.card.border.border-white.bg-primary.py-8
<!-- 6 elements with autoplay-->
<div class="carousel-6 mx-2 mb-2 mt-2">
	<div class="card border border-white bg-primary py-8"></div>
	<div class="card border border-white bg-primary py-8"></div>
	<div class="card border border-white bg-primary py-8"></div>
	<div class="card border border-white bg-primary py-8"></div>
	<div class="card border border-white bg-primary py-8"></div>
	<div class="card border border-white bg-primary py-8"></div>
	<div class="card border border-white bg-primary py-8"></div>
	<div class="card border border-white bg-primary py-8"></div>
	<div class="card border border-white bg-primary py-8"></div>
</div>
$('.carousel-6').slick({
	slidesToShow:   6,
	slidesToScroll: 1,
	infinite: true,
	dots: false,
	arrows: false,
	autoplay: true,
	autoplaySpeed: 2000,
	lazyLoad: 'ondemand',
	responsive: [
		{
		breakpoint: 992,
		settings: {
			slidesToShow: 4,
			slidesToScroll: 2
			}
		},
		{
		breakpoint: 768,
		settings: {
			slidesToShow: 4,
			slidesToScroll: 2
			}
		},
		{
		breakpoint: 576,
		settings: {
			slidesToShow: 2,
			slidesToScroll: 1
			}
		}
	]

});

Version 2.0.0, hello@getreplacer.com

To spread the power of good design