Simple Content Slider with Pure CSS - Gallery CSS

File Size: 489KB
Views Total: 36187
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Content Slider with Pure CSS - Gallery CSS

Gallery CSS is a simple and lightweight content slider built only with Html and CSS that supports all the html elements. It also provides a jQuery plugin version for Internet Explore 8.

Features:

  • Support for Auto Play
  • Suuprot for transition animation between content
  • Custom controls
  • Bullet navigation
  • Pure CSS, not a script to be found

How to use it:

1. Include gallery.css and theme css on your web page

<link rel="stylesheet" href="gallery.css">
<link rel="stylesheet" href="gallery.theme.css">

2. Markup html structure

<div class="gallery autoplay items-3">
<div id="item-1" class="control-operator"></div>
<div id="item-2" class="control-operator"></div>
<div id="item-3" 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>
<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> </div>
</div>

3. With browser prefixes (optional)

<script src="./js/prefixfree.min.js"></script>

This awesome jQuery plugin is developed by benschwarz. For more Advanced Usages, please check the demo page or visit the official website.