CSS Full-Bleed Scroll-Snapping Carousel with Centered Content and Visible Overflow

from: https://www.bram.us/2021/05/06/css-full-bleed-scroll-snapping-carousel-with-visible-overflow/

by Konstantin Rouda

HTML

<input id="debug" type="checkbox" />
<label for="debug">Show Debug Outlines</label>

<section>
	<h2>Regular Carousel</h2>
	<div class="slider">
		<div class="slidewrapper">
			<div class="slide">
				Item 1
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 2
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 3
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 4
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 5
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 6
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 7
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 8
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 9
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 10
			</div>
		</div>
	</div>
	
	<h2>Full-Bleed Carousel <em>(with Centered Content)</em></h2>
	<div class="slider full-bleed">
		<div class="slidewrapper">
			<div class="slide">
				Item 1
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 2
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 3
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 4
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 5
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 6
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 7
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 8
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 9
			</div>
		</div>
		<div class="slidewrapper">
			<div class="slide">
				Item 10
			</div>
		</div>
	</div>
	
	<footer>
		<p><em>Demo for <a href="https://www.bram.us/?p=28303"...

CSS

:root {
	--column-size: min(100%, 500px);
	--slider-size: min(100%, 360px);
	--slider-border-radius: 2em;
	--slider-fullbleed-gap: 40px;
}

html, body {
	margin: 0;
	padding: 0;
	background: #fff;

	display: grid;
	place-items: center;
	min-height: 100vh;
}

h1, h2, footer {
	margin-top: 4em;
	text-align: center;
}

section {
	width: var(--column-size);
	margin: 0 auto;
	min-height: 100vh;
	background: rgb(0 0 0 / 0.1);
}

.slider {
	display: flex;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	
	width: var(--slider-size);
	margin: 1em auto;
	
	border-radius: var(--slider-border-radius);
}

/* Hide Scrollbar itself */
.slider {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.slider::-webkit-scrollbar {
  display: none;
}

.slidewrapper {
	scroll-snap-align: center;

	/* Size me */
	flex: 0 0 var(--slider-size);
	width: var(--slider-size);
	
	/* This is needed for the paddings (in the full-bleed variant) to work …*/
	box-sizing: content-box;

	/* To allow the child .slide to stretch out inside me */
	display: flex;
}

.slide {
	background: rgb(0 0 0 / 0.1);
	
	/* Stretch me out in my .slidewrapper parent */
	flex: 1;
	
	/* Give me some height */
	min-height: 200px;
	aspect-ratio: 16/9;
	
	/* Center text */
	display: grid;
	place-content: center;
}

/* @ref https://www.bram.us/2019/04/09/breaking-elements-out-of-their-containers-in-css-with-full-bleed/ */
.full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Put border-radius on the individual slides, not the slider-container */
.slider.full-bleed {
	border-radius: 0;
}
.slider.full-bleed .slide {
	border-radius: var(--slider-border-radius);
}

/* Add a faux gap between the slidewrappers */
.slider.full-bleed .slidewrapper {	
	margin-right: var(--slider-fullbleed-gap);
}

/* Offset first slidewrapper from the left so that it apppears centered on load */
.slider.full-bleed .slidewrapper:first-child {
	padding-left: calc(50vw - (var(--slider-size) / 2));
}

/* Offset...