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 revolverIt 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:
- Container: via container or containerSelector options.
- Slides: via slides or slidesSelector options.
var mySlideContainer = document.getElementById('slidesContainer');
var mySlides = mySlideContainer.getElementsByClassName('slide');
var mySlider = new Revolver({container: mySlideContainer, slides: mySlides});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:
- barebones-example: An out-of-the-box example.
- fade-example: Slides fade in and out from each other.
- reveal-example: A curtain-like transition.
- slide-example: A sliding in and out transition.
- controls-example: How to build slider controls.
- events-example: Listening and handling events.
- progress-example: Progress bar example.0
Or make your own custom transition.
- jquery-plugin: A jQuery plugin.
- mootools-plugin: A MooTools plugin.
- bonzo-plugin: A Bonzo plugin.
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>