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>
.
..
tutorial
CSS: Add Stroke to Text - How to Outline Text

How to outline text by adding stroke using only CSS; compatible with all browsers including IE11.
CSS: Auto-hide Page Sections

Automatically hide page sections to maximize page space; uses HTML and CSS only.
CSS: Basic Contact Form

Create a responsive, good looking, basic contact form using only HTML and CSS.
CSS: Bokeh Background Online Code Generator

HTML and CSS only.
CSS: Box Shadow

All about the box-shadow property.
CSS: Card Selection Changes Background

Change the background when a card is selected using only HTML and CSS.
CSS: Carousel

Animated, responsive carousel / hero / slider menu using only HTML and CSS.
CSS: Center Elements on Page

How to center elements both vertically and horizontally on the page.
CSS: Christmas Themed Bokeh Background

A bokeh background with a Christmas theme.
CSS: Create a Speech Bubble/Balloon

An example popup speech bubble or balloon.
CSS: Custom Checkboxes and Radio Buttons

Create custom checkboxes and radio buttons using only HTML and CSS.
CSS: Custom Dropdown Lists

Stylish dropdown lists using only HTML and CSS.
CSS: Customize Scrollbars on Chrome, Edge and Firefox

Use only CSS to customize scrollbars.
CSS: Customize SELECT and OPTION elements

How to customize the look of select and option HTML elements.
CSS: Dark Mode Contact Form

Create a responsive dark mode contact form using only HTML and CSS.
CSS: Dark Mode Login and Register Form or Page

Combination dark mode login and register form in one using only HTML and CSS.
CSS: Detect Dark Mode

Using CSS @media query to detect if user is using dark mode theme.
CSS: Expanding Search Bar

HTML and CSS only.
CSS: Feature Queries

Use @supports to know which CSS features are supported.
CSS: Five Star Rating Form

An example five star rating form example using only HTML and CSS.
CSS: Flip Cards Based Website Landing Page

Responsive website landing page with flip cards using only HTML and CSS.
CSS: Format Images with Varying Aspect Ratios

Format images with varying aspect ratios to fit the same aspect ratio without stretching.
CSS: Hero or Banner Menu System

A great way to organize large menus.
CSS: Horizontally Scrolling Cards with a Snap-to Feature

Create cards with a horizontal scroll and a snap-to feature.
CSS: Image Portfolio

Create an image portfolio to show off images using only HTML and CSS.
CSS: Landing Page with Menu

A large menu that slides in from the sides and then the top.
CSS: Large Dropdown Menu

A responsive, large dropdown menu for sites with lots of menu options.
CSS: Loading Page - Brine Shrimp

Create an abstract brine shrimp swimming along while the page is loading.
CSS: Loading Page - Data Gatherer

Create an abstract net that appears to be gathering data as it animates.
CSS: Loading Page - Inch Worm

Create an abstract inch worm that inches along as the page is loading.
CSS: Loading Page - Laser Lights

Create a nerve racking light show while the page is loading.
CSS: Loading Page - Sine Wave

A sine wave to watch as the page loads.
CSS: Mastering Bootstrap Rows and Columns

How the rows and columns work.
CSS: Menu with Submenus

A menu system which has submenus upon submenus.
CSS: Mobile Navigation Menu

A mobile-centric navigation menu using HTML and CSS only.
CSS: Mobile-Responsive Website for Beginners

HTML and CSS only.
CSS: Mock Google Form

HTML and CSS only.
CSS: Page Rotates on the Y-axis to Reveal Menu

3D animated, responsive, Y-axis rotating page reveals menu using only HTML and CSS.
CSS: Page with Lifted Corners

A piece of paper laying flat with lifted, peeled or curled corners with a couple versions to help fit different scenarios.
CSS: Parallax Effect Footer

A web page footer with a parallax effect.
CSS: Parallax Effect Landing Page

HTML and CSS only.
CSS: Position Page Footer at the Bottom

How to position the page footer at the bottom for all browsers including IE6.
CSS: Rainbow Linear Gradient

A rainbow effect for a background.
CSS: Remove White Space Between Images

Several options to remove white space between pictures.
CSS: Responsive Avatar Cards

An interesting way to organize data in limited space; uses HTML and CSS only.
CSS: Single Page Website

HTML and CSS only.
CSS: Slick, Simple Nav-Bar Menu

HTML and CSS only.
CSS: Slide on Scroll

HTML and CSS only.
CSS: Tilting Page Reveals Menu

Animated, responsive, tilting website page reveals menu using only HTML and CSS.
CSS: Toggle Buttons

Use checkbox and radio controls to create toggle buttons just like on the Apple iPhone.
CSS: Unique Cube Menu

A rotating cube menu using only HTML and CSS.
CSS: Web Colors

A color sortable table of the standard web colors with their CSS names for use in Cascading Style Sheets pages.
CSS/JS: Landing Page with Water Ripples

A website landing page with a water ripple effect (requires one line of JavaScript).
Tailwind CSS Files Download

Download Tailwind v8.0.1 CSS files.

PROWAREtech

Hello there! How can I help you today?
Ask any question

PROWAREtech

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.
ACCEPT REJECT