<div class="max-w-prose mx-auto py-6">
	<p>Show a small portion of both ends of the slider</p>
	<div class="c-slick c-slick-center js-slick-center mt-4">
		<div class="c-slick__item">
			<img src="https://picsum.photos/400/300?random=1" width="400" height="300" decoding="async" fetchpriority="high" alt="">
		</div>
		<div class="c-slick__item">
			<img src="https://picsum.photos/400/300?random=2" width="400" height="300" decoding="async" fetchpriority="high" alt="">
		</div>
		<div class="c-slick__item">
			<img src="https://picsum.photos/400/300?random=3" width="400" height="300" decoding="async" fetchpriority="high" alt="">
		</div>
		<div class="c-slick__item">
			<img src="https://picsum.photos/400/300?random=4" width="400" height="300" decoding="async" fetchpriority="high" alt="">
		</div>
		<div class="c-slick__item">
			<img src="https://picsum.photos/400/300?random=5" width="400" height="300" decoding="async" fetchpriority="high" alt="">
		</div>
		<div class="c-slick__item">
			<img src="https://picsum.photos/400/300?random=6" width="400" height="300" decoding="async" fetchpriority="high" alt="">
		</div>
	</div>
</div>

<div class="max-w-prose mx-auto py-6">
	<p>Show a small portion of right end of the slider</p>
	<div class="c-slick c-slick-right js-slick-right mt-4">
		<div class="c-slick__item">
			<img src="https://picsum.photos/400/300?random=7" width="400" height="300" decoding="async" fetchpriority="high" alt="">
		</div>
		<div class="c-slick__item">
			<img src="https://picsum.photos/400/300?random=8" width="400" height="300" decoding="async" fetchpriority="high" alt="">
		</div>
		<div class="c-slick__item">
			<img src="https://picsum.photos/400/300?random=9" width="400" height="300" decoding="async" fetchpriority="high" alt="">
		</div>
		<div class="c-slick__item">
			<img src="https://picsum.photos/400/300?random=10" width="400" height="300" decoding="async" fetchpriority="high" alt="">
		</div>
		<div class="c-slick__item">
			<img src="https://picsum.photos/400/300?random=11" width="400" height="300" decoding="async" fetchpriority="high" alt="">
		</div>
		<div class="c-slick__item">
			<img src="https://picsum.photos/400/300?random=12" width="400" height="300" decoding="async" fetchpriority="high" alt="">
		</div>
	</div>
</div>

body {
	font-size: 0.875rem;
	line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #242424;
    color: #f0f0f0;
  }
}

.c-slick-center .c-slick__item {
  position: relative;
	margin-inline: 0.5rem;
}
.c-slick-right .c-slick__item {
  position: relative;
	margin-inline-end: 1rem;
}
.c-slick__item img {
	width: 100%;
	height: auto;
}
.c-slick .slick-dots {
	bottom: -3rem;
}

.c-slick-right .slick-list {
	padding-inline-end: 70px;
}

$(function() {
    $('.js-slick-center').slick({
		autoplay: true,
		arrows: false,
		dots: true,
		slidesToShow: 2,
		centerMode: true,
		centerPadding: '35px',
    });
	
	$('.js-slick-right').slick({
        autoplay: true,
		arrows: false,
		dots: true,
		slidesToShow: 2,
    });
});