Cross-fading Carousel In Pure CSS

Category: CSS & CSS3 , Slider , Slideshow | September 14, 2017
Views Total:14,515 views
Official Page:Go to website
Last Update:September 14, 2017


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;

You Might Be Interested In:

One thought on “Cross-fading Carousel In Pure CSS

  1. mmshops

    Very nice, but it has a problem: if I insert a link in the text, I cannot click it. Any suggestion?


Leave a Reply