PROWARE technologies
PROWARE technologies

Animated, Responsive Carousel/Hero/Slider Menu Using Only HTML and CSS

This carousel can contain pretty much any HTML such as a menu. This is probably most appropriate as a hero on a website landing page. No JavaScript required.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Pure CSS Carousel</title>
	<style>
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	html,
	body {
		padding: 0;
		margin: 0;
		background-color: #445;
		color: white;
		font-family: sans-serif;
	}
	h1 {
		text-align: center;
		margin: 10vh auto;
		font-size: 10vmin;
		text-shadow: 1vmin 1vmin rgba(0,0,0,0.5);
	}
	a {
		text-decoration: none;
		color: inherit;
	}
	.slide-btn {
		display: none;
	}
	.carousel {
		position: relative;
		width: 100vw;
		height: 50vh;
		overflow: hidden;
	}
	.slide {
		float: left;
		height: 100%;
		width: 0;
		transition: width .3s linear;
		padding: 0;
		overflow: hidden;
		white-space: nowrap;
	}
	.slide > * {
		transition: transform .15s linear;
		transform: scale(0);
	}
	.labels {
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
	}
	.labels label {
		display: inline-block;
		background-color: transparent;
		width: 25px;
		height: 25px;
		border-radius: 25px;
		margin: .5vmin 2vmin;
		border: 3px solid white;
	}
	.carousel .one,
	.carousel .two,
	.carousel .three,
	.carousel .four,
	.carousel .five {
		background-position: center center;
		background-size: cover;
	}
	.carousel .one {
		background-image: url(https://picsum.photos/id/40/1920/540);
	}
	.carousel .two {
		background-image: url(https://picsum.photos/id/41/1920/540);
	}
	.carousel .three {
		background-image: url(https://picsum.photos/id/42/1920/540);
	}
	.carousel .four {
		background-image: url(https://picsum.photos/id/43/1920/540);
	}
	.carousel .five {
		background-image: url(https://picsum.photos/id/44/1920/540);
	}
	#slide-btn-1:checked ~ .one,
	#slide-btn-2:checked ~ .two,
	#slide-btn-3:checked ~ .three,
	#slide-btn-4:checked ~ .four,
	#slide-btn-5:checked ~ .five {
		width: 100%;
	}
	#slide-btn-1:checked ~ .one > *,
	#slide-btn-2:checked ~ .two > *,
	#slide-btn-3:checked ~ .three > *,
	#slide-btn-4:checked ~ .four > *,
	#slide-btn-5:checked ~ .five > * {
		transform: scale(1);
	}
	#slide-btn-1:checked ~ .labels label[for="slide-btn-1"],
	#slide-btn-2:checked ~ .labels label[for="slide-btn-2"],
	#slide-btn-3:checked ~ .labels label[for="slide-btn-3"],
	#slide-btn-4:checked ~ .labels label[for="slide-btn-4"],
	#slide-btn-5:checked ~ .labels label[for="slide-btn-5"] {
		background-color: white;
	}
	</style>
</head>
<body>
	<div class="carousel">
		<input type="radio" name="carousel" id="slide-btn-1" class="slide-btn" checked />
		<input type="radio" name="carousel" id="slide-btn-2" class="slide-btn" />
		<input type="radio" name="carousel" id="slide-btn-3" class="slide-btn" />
		<input type="radio" name="carousel" id="slide-btn-4" class="slide-btn" />
		<input type="radio" name="carousel" id="slide-btn-5" class="slide-btn" />
		<div class="slide one"><h1><a href="#">AMAZING</a></h1></div>
		<div class="slide two"><h1><a href="#">PURE</a></h1></div>
		<div class="slide three"><h1><a href="#">CSS</a></h1></div>
		<div class="slide four"><h1><a href="#">CAROUSEL</a></h1></div>
		<div class="slide five"><h1><a href="#">(no JavaScript)</a></h1></div>
		<div class="labels">
			<label for="slide-btn-1"></label>
			<label for="slide-btn-2"></label>
			<label for="slide-btn-3"></label>
			<label for="slide-btn-4"></label>
			<label for="slide-btn-5"></label>
		</div>
	</div>
</body>
</html>

Coding Video

https://youtu.be/CDa9V2YjEwI