Cross-fading Carousel In Pure CSS

Category: CSS & CSS3 , Slider , Slideshow | September 14, 2017
Author: sea-reel
Views Total: 3,133
Official Page: Go to website
Last Update: September 14, 2017
License: MIT

Preview:

Cross-fading Carousel In Pure CSS

Description:

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)">
    ...
  </div>
  <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">
</div>

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?

    Reply

Leave a Reply