Advanced Slider & Lightbox CSS Library – takefive.css

Preview:

Description:

takefive.css is a powerful, extendable, and advanced slider/lightbox/gallery library written in pure CSS.

Basic usage:

1. Load the core stylesheet takefive.css in the document.

<link rel="stylesheet" href="dist/takefive.min.css" />

2. Load the extensions of your choice.

<!-- counters -->
<link rel="stylesheet" href="plugins/counters/takefive-counters.min.css" />
<!-- Glyphs -->
<link rel="stylesheet" href="plugins/glyphs/takefive-glyphs.min.css" />
<!-- i18n -->
<link rel="stylesheet" href="plugins/i18n/takefive-i18n.min.css" />
<!-- maxsize -->
<link rel="stylesheet" href="plugins/maxsize/takefive-maxsize.min.css" />
<!-- polaroid -->
<link rel="stylesheet" href="plugins/polaroid/takefive-polaroid.min.css" />
<!-- slides -->
<link rel="stylesheet" href="plugins/slides/takefive-slides.min.css" />
<!-- toolbar -->
<link rel="stylesheet" href="plugins/toolbar/takefive-toolbar.min.css" />

3. It also comes with several JS add-ons to extend the library.

// clean empty hash
<script async src="dist/js-add-ons/takefive-clean-empty-hash.js"></script>
// clean history
<script async src="dist/js-add-ons/takefive-clean-history.js"></script>
// keyboard events
<script async src="dist/js-add-ons/takefive-keyboard-events.js"></script>
// touch events
<script async src="dist/js-add-ons/takefive-touch-events.js"></script>

4. Wrap your content into a container element with the CSS class of ‘slide’.

<article id="demo" class="slide">
  ... any content here
</article>

5. Create an element to toggle the slider.

<a href="#demo">
  Toggle
</a>

6. Nested sliders are supported as well.

<section>
  <article id="slide-1" class="slide">
    ... any content here ...
    <nav>
      <a href="#slide-1-1" rel="child">Nested gallery</a>
    </nav>
  </article>
  <section>
    <article id="slide-1-1" class="slide">
      ... any content here ...
      <nav>
        <a href="#slide-1" rel="parent">Item #1</a>
      </nav>
    </article>
  </section>
</section>