Slick carousel

<!-- 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-->
<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-->
<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
			}
		}
	]

});