PROWAREtech

articles » current » css » carousel

CSS: Carousel

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: 100%;
		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>

Here is a variation on the above.

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

    .slide a {
        text-decoration: none;
        color: inherit;
    }

    .slide-btn {
        display: none;
    }

    .carousel {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .slide {
        float: left;
        height: 100%;
        width: 0;
        transition: width .3s linear;
        padding: 0;
        overflow: hidden;
        white-space: nowrap;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .slide > * {
            transition: transform .15s linear;
            transform: scale(0);
        }

    .slide h1 {
        font-size: 10vmin;
        text-shadow: 1vmin 1vmin rgba(0,0,0,0.5);
        margin: 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;
        background-attachment: fixed;
    }

    .carousel .one {
        background-image: url(https://picsum.photos/id/40/1920/1080);
    }

    .carousel .two {
        background-image: url(https://picsum.photos/id/41/1920/1080);
    }

    .carousel .three {
        background-image: url(https://picsum.photos/id/42/1920/1080);
    }

    .carousel .four {
        background-image: url(https://picsum.photos/id/43/1920/1080);
    }

    .carousel .five {
        background-image: url(https://picsum.photos/id/44/1920/1080);
    }

    #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="#">QUITE</a></h1><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>
    <h1>TEST</h1>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
</body>
</html>

Coding Video

https://youtu.be/CDa9V2YjEwI

Parallax Effect

Here is this carousel using the JavaScript Parallax Effect library for some added pop. There is also a script that causes the carousel to circulate on an interval of 5 seconds.

<!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>Carousel with JavaScript</title>
	<style>
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	html,
	body {
		padding: 0;
		margin: 0;
		background-color: #445;
		color: white;
		font-family: sans-serif;
	}
	.slide a {
		text-decoration: none;
		color: inherit;
	}
	.slide-btn {
		display: none;
	}
	.carousel {
		position: relative;
		width: 100%;
		height: 75vh;
		overflow: hidden;
	}
	.carousel h1 {
		text-align: center;
		margin: 0 auto;
		line-height: 75vh;
		font-size: 10vmin;
		text-shadow: 1vmin 1vmin rgba(0,0,0,0.5);
	}
	.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/810);
	}
	.carousel .two {
		background-image: url(https://picsum.photos/id/41/1920/810);
	}
	.carousel .three {
		background-image: url(https://picsum.photos/id/42/1920/810);
	}
	.carousel .four {
		background-image: url(https://picsum.photos/id/43/1920/810);
	}
	.carousel .five {
		background-image: url(https://picsum.photos/id/44/1920/810);
	}
	#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" onclick="setInt();" checked />
		<input type="radio" name="carousel" id="slide-btn-2" class="slide-btn" onclick="setInt();" />
		<input type="radio" name="carousel" id="slide-btn-3" class="slide-btn" onclick="setInt();" />
		<input type="radio" name="carousel" id="slide-btn-4" class="slide-btn" onclick="setInt();" />
		<input type="radio" name="carousel" id="slide-btn-5" class="slide-btn" onclick="setInt();" />
		<div class="slide one parallax-effect"><h1><a href="#">JAVASCRIPT</a></h1></div><!-- add "parallax-effect" class to each element that it applies -->
		<div class="slide two parallax-effect"><h1><a href="#">CAROUSEL</a></h1></div>
		<div class="slide three parallax-effect"><h1><a href="#">WITH</a></h1></div>
		<div class="slide four parallax-effect"><h1><a href="#">PARALLAX</a></h1></div>
		<div class="slide five parallax-effect"><h1><a href="#">EFFECT</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>

    <h1>TEST WITH PARALLAX EFFECT</h1>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>
    <p>TEST</p>


	<script src="/js/parallax-effect.min.js"></script><!-- ALWAYS LOAD THIS LIBRARY AT THE END OF THE HTML DOCUMENT -->
	<script type="text/javascript"> // THIS CODE CAUSES THE CAROUSEL TO CIRCULATE
	var int;
	function setInt() {
		clearInterval(int);
		int = setInterval(function() {
			var btns = document.getElementsByName("carousel");
			for(var i = 0; i < btns.length; i++) {
				if(btns[i].checked) {
					btns[i].checked = false;
					if(i + 1 == btns.length) {
						btns[0].checked = true;
					}
					else {
						btns[i + 1].checked = true;
					}
					return;
				}
			}
		}, 5000); // 5000 milliseconds
	}
	setInt();
	</script>
	
</body>
</html>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE