A javascript library for building your own content slider.
CoffeeScript JavaScript Shell
Failed to load latest commit information.
api fixed spelling mistake Jul 8, 2014
git-hooks added build step to pre-commit hook Jun 2, 2014
test added goTo test and tidied things up a bit May 14, 2014
.gitignore initial intern testing Dec 12, 2013
CONTRIBUTING.md updated contributing guide based on recent changes Dec 24, 2013
package.json upgraded grunt-bower-task package Oct 8, 2014


Revolver Build Status Code Climate

Revolver is a javascript library to help you build your own content slider. It has a sensible API (seriously, go check it out) that helps you get from mockup to reality with less friction than most of the other "cookie-cutter" sliders out there.

One important difference is, Revolver is a much lower component than most others. It's more of a framework than it is a complete solution. So, naturally, hand-writing a little javascript comes with the territory. Let's get started!


The recommended way to install Revolver is with Bower.

bower install revolver

It will resolve all of Revolver's dependencies for you, no need to go and download those separately. If you are unfamiliar with it, I highly recommend you take a look!

Of course, you can still take the ol' fashioned approach and download/unzip anywhere in your project. Just make sure you also do the same for Revolver's hard dependencies: Lodash and Bean.


There are only two things that are required to instantiate Revolver:

  1. Container: via container or containerSelector options.
  2. Slides: via slides or slidesSelector options.
Using DOM Nodes
var mySlideContainer = document.getElementById('slidesContainer');
var mySlides = mySlideContainer.getElementsByClassName('slide');

var mySlider = new Revolver({container: mySlideContainer, slides: mySlides});
Using Selectors
var mySlider = new Revolver({containerSelector: '#slidesContainer', slideSelector: '.slide'});

You may also implement any combination of the two methods.

For more usage information, please refer to the API.


Because of Revolver's unopinionated philosophy, it does very little out of the box and usually requires some small amount of customization to hit the sweet spot. Here are a few ideas to get you started:

Or make your own custom transition.


Making a Custom Transition

When composing your own custom slide transitions, it is recommended that you use a good animation library versus using CSS3 animation. But not all animation libraries are created equal. We recommend using one of the following:

Or, if not one of these, choose one that uses requestAnimationFrame.


Please review the guidelines for contributing before opening a pull request. It includes docs for building, testing, and handling dependencies.

<script data-gratipay-username="johnnyfreeman" data-gratipay-widget="button" src="//gttp.co/v1.js"></script>