Slider

<div class="slider-container">
	<input type="radio" name="slider-group" id="radio1" checked />
	<input type="radio" name="slider-group" id="radio2" />
	<input type="radio" name="slider-group" id="radio3" />
	<div class="slider">
		<div class="slide">1</div>
		<div class="slide">2</div>
		<div class="slide">3</div>
	</div>
</div>
<nav class="slider-nav">
	<label class="button" for="radio1">1</label>
	<label class="button" for="radio2">2</label>
	<label class="button" for="radio3">3</label>
</nav>

:root {
--total-slides: 3;
--button-size: 40px;
}

body {
	margin: 0;
}

	:root:has(#radio1:checked) {
		.slider { transform: translateX(0); }
		.slider-nav .button:nth-child(1) { background-color: firebrick; }
	}
	:root:has(#radio2:checked) {
		.slider { transform: translateX(-100vw); }
		.slider-nav .button:nth-child(2) {
			background-color: cornflowerblue;
		}
	}
	:root:has(#radio3:checked) {
		.slider { transform: translateX(-200vw); }
		.slider-nav .button:nth-child(3) {
			background-color: darkcyan;
		}
	}

.slider-container {
	border-radius: 20px;
	overflow-x: hidden;
	margin: 0 auto;

	[name=slider-group] {
		display: none;
	}	

	.slider {
		width: calc(var(--total-slides) * 100vw);
		font-size: 0;
		transition: transform 300ms ease-in-out;
		
		.slide {
			width: 100vw;
			height: 150px;
			display: inline-flex;
			font-size: 11px;
			background: firebrick;
			justify-content: center;
			align-items: center;

			&:nth-child(2) {
				background: cornflowerblue;
			}
			&:nth-child(3) {
				background: darkcyan;
			}
		}		
	}		
}
.slider-nav {
	margin-top: 10px;
	display: flex;
	gap: 10px;
	justify-content: center;
	.button {
		display: flex;
		background-color: dimgray;
		cursor: pointer;
		justify-content: center;
		align-items: center;
		border-radius: 999px;
		width: var(--button-size);
		height: var(--button-size);
		border: none;
		color: white;
	}	
}