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

Author: upamanyudas
Views Total: 5,490 views
Official Page: Go to website
Last Update: September 28, 2015
License: MIT


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 class="item">
    <h1>Item 2</h1>
  <figure class="item">
    <h1>Item 3</h1>
  <figure class="item">
    <h1>Item 4</h1>
  <figure class="item">
    <h1>Item 5</h1>
  <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>

See also  Animated Segmented Controls with Pure CSS/CSS3

Leave a Reply

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