Lightweight Cross-fading Carousel with Pure CSS – Galarie.css

Galarie.css is a lightweight CSS library for generating an automatic, cross-fading carousel from any html content.

How to use it:

Load the required CSS files in the head section of the web page.

<link rel="stylesheet" href="galarie.prefixed.css">
<link rel="stylesheet" href="galarie.theme.css">

Create a basic carousel containing 5 html slides as follow.

<div class="galarie autoplay items-5">
  <div id="item-1" class="control-operator"></div>
  <div id="item-2" class="control-operator"></div>
  <div id="item-3" class="control-operator"></div>
  <div id="item-4" class="control-operator"></div>
  <div id="item-5" class="control-operator"></div>
  <figure class="item">
    <h1>Item 1</h1>
  </figure>
  <figure class="item">
    <h1>Item 2</h1>
  </figure>
  <figure class="item">
    <h1>Item 3</h1>
  </figure>
  <figure class="item">
    <h1>Item 4</h1>
  </figure>
  <figure class="item">
    <h1>Item 5</h1>
  </figure>
  <div class="controls">
    <a href="#item-1" class="control-button">•</a>
    <a href="#item-2" class="control-button">•</a>
    <a href="#item-3" class="control-button">•</a>
    <a href="#item-4" class="control-button">•</a>
    <a href="#item-5" class="control-button">•</a>
  </div>
</div>