Author: | madmurphy |
---|---|
Views Total: | 518 views |
Official Page: | Go to website |
Last Update: | October 28, 2022 |
License: | MIT |
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>