Cross-fading Carousel In Pure CSS

Author: sea-reel
Views Total: 13,386 views
Official Page: Go to website
Last Update: September 14, 2017
License: MIT


Cross-fading Carousel In Pure CSS


A pure CSS carousel that fades through a series of web contents (images, div elements, etc) using CSS3 animations.

How to use it:

Add your own slide elements to the carousel.

<div class="carousel">
  <img src="1.jpg">
  <div style="background:url(2.jpg)">
  <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">

Download and insert the style sheet ‘carousel.css’ in the document’s head section.

<link rel="stylesheet" href="carousel.css">

Apply your own CSS styles to the carousel.

.carousel {
  margin: auto;
  max-width: 800px;
  height: 450px;
  box-shadow: 0 1em 5em black;

See also  iOS Style Gradient Progress Bar with Pure CSS/CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *