CSS Only Responsive Carousel

If you’ve read any number of my posts, you are well aware that I’m a huge proponent of CSS over Javascript whenever possible. With recent innovations to CSS3 over the last handful of years, animations that once required Javascript can be accomplished with CSS. This means elements such as hover states, animated navigation bars, showing and hiding items, tabs, accordions, and more can be accomplished without any Javascript.

Today I would like to show you how to create a CSS only image carousel.

Demo

Browser Support

All the major modern browsers support this animation. If you’re worried about IE9 or older, you will unfortunately need to use Javascript, as this method is only supported in IE10.

Pretty cool, eh? So how do we go about creating this effect?

The HTML Structure


<div class="css-carousel">
	<img class="css-img" src="path/to/image/1" />
	<img class="css-img" src="path/to/image/2" />
	<img class="css-img" src="path/to/image/3" />
	<img class="css-img" src="path/to/image/4" />
	<img class="css-img" src="path/to/image/5" />
	<img class="css-img" src="path/to/image/6" />
</div>

The CSS

.css-carousel {
	width: 100%;
	height: 350px; /* Height of images */
	position: relative;
	overflow: hidden;
}
.css-carousel .css-img {
	max-width: 100%;
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	-webkit-animation: css-carousel-fade 30s linear infinite;
	-moz-animation: css-carousel-fade 30s linear infinite;
	-ms-animation: css-carousel-fade 30s linear infinite;
	animation: css-carousel-fade 30s linear infinite;
}
.css-carousel .css-img:nth-child(2) {
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
	-ms-animation-delay: 5s;
	animation-delay: 5s;
}
.css-carousel .css-img:nth-child(3) {
	-webkit-animation-delay: 10s;
	-moz-animation-delay: 10s;
	-ms-animation-delay: 10s;
	animation-delay: 10s;
}
.css-carousel .css-img:nth-child(4) {
	-webkit-animation-delay: 15s;
	-moz-animation-delay: 15s;
	-ms-animation-delay: 15s;
	animation-delay: 15s;
}
.css-carousel .css-img:nth-child(5) {
	-webkit-animation-delay: 20s;
	-moz-animation-delay: 20s;
	-ms-animation-delay: 20s;
	animation-delay: 20s;
}
.css-carousel .css-img:nth-child(6) {
	-webkit-animation-delay: 25s;
	-moz-animation-delay: 25s;
	-ms-animation-delay: 25s;
	animation-delay: 25s;
}
@-webkit-keyframes css-carousel-fade {
    0%, 20%, 100% { opacity: 0; }
    5%, 15% { opacity: 1;}
}
@-moz-keyframes css-carousel-fade {
    0%, 20%, 100% { opacity: 0; }
    5%, 15% { opacity: 1;}
}
@-ms-keyframes css-carousel-fade {
    0%, 20%, 100% { opacity: 0; }
    5%, 15% { opacity: 1;}
}
@keyframes css-carousel-fade {
	0%, 20%, 100% { opacity: 0; }
	5%, 15% { opacity: 1;}
}

The above CSS is specifically for 6 images, but it can be modified for any number of image elements with a little bit of math.

One full cycle of the carousel is 30 seconds long, so we break up animation into 5 second sections. Each image is by default set to an opacity of 0 for 5 seconds, and the other 25 seconds the opacity is 1, allowing for the image to be see. We absolutely position the images in the same place, and use some CSS transitions to make the transition smooth and appealing. We then delay each subsequent image by 5 seconds so the animations overlap nicely, creating the carousel effect.

If your carousel is more or less images, you will need to modify the length of the animation, as well as the keyframe selectors. A little bit of math should do the trick.

Categories Blog