Home » HTML 5 » HTML5 CSS3 Powered Content Slider with slider.js

HTML5 CSS3 Powered Content Slider with slider.js


Slider.js is a slideshow engine built with jQuery and uses CSS3 and HTML canvas for the transitions.

Elements can have a text with links and users can browse it with a pagination or using the prev-next links.

Basic features of Slider.js

  • Each slide displays the image, but can also have a text caption and a link.
  • Slides navigation (pages, next, previous)
  • Load images before starting the slider.
  • Load the slider photos with a JSON object (distant or local).

Slider.js is highly extensible and customizable. You can Choose your transition among 13 available CSS Transitions and 10 built-in Canvas transition functions. You can Choose or style your own theme. It comes with Extend the API with new features. (see the Flickr example). The code is very lightweight slider.min.js is only 11K and slider.min.css  is 8.2K.

Unlike many Javascript and jQuery image sliders, Slider.js animation implementation is simple, clean and do not parse/manipulate DOM style attributes with Javascript each render frame rate.
Slider.js is an hybrid solution taking the efficiency of CSS3 transitions and the power of Canvas animation based on requestAnimationFrame.

More details in the technical part.

Browser compatibility of Slider.js

This library intends to work perfectly with latest browsers (Chrome, Firefox 4+, Safari, IE10).

On older browsers (like IE6, FF3.0, …) CSS Transitions aren’t supported, it means that there are no animations but the slider works, it’s not broken, because CSS by its nature provides a graceful degradation.

The data source is JSON and, besides the 13 available CSS transitions, there 10 built-in and good-looking canvas functions.

You can download Slider.js from Git

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.