ResponsiveSlides.js

ResponsiveSlides.js is a tiny jQuery plugin by @viljamis that creates a super-lightweight responsive slider using elements inside a container. It has been used on sites like Microsoft's Build 2012 and Gridset App.

Under 1kb

Gzipped

Video-Ready

Youtube & Vimeo

CSS3 transitions

With Javascript Fallback

Viljamis had done something very cool. He's created a simple & lightweight responsive slider plugin and packaged it in under 1kb. We've added a tiny little bit of code to allow for YouTube videos to be added. Nothing else. The file still clocks in at just about 1kb in size. With the in-built caching of our template, you'll feel the raw speed in using this option.

All you have to do is make sure all your images are the same size. The slider will still work otherwise, but your content underneath will jump up and down as the height changes.

The project is on GitHub and completely open source.

Features

  • Fully responsive
  • 1kb minified and gzipped
  • CSS3 transitions with JavaScript fallback
  • Simple markup using unordered list
  • Settings for transition and timeout durations
  • Multiple slideshows supported
  • Automatic and manual fade
  • Works in all major desktop and mobile browsers
  • Captions and other html-elements supported inside slides
  • Separate pagination and next/prev controls
  • Possibility to choose where the controls append to
  • Possibility to randomize the order of the slides
  • Possibility to use custom markup for pagination
  • Can be paused while hovering slideshow and/or controls
  • Images can be wrapped inside links
  • Optional 'before' and 'after' callbacks