Revolver.js is a modular javascript library to help you build your own content slider. It has a sensable, unopinionated API that helps you get from mockup to reality with less friction than the other cookie-cutter sliders out there. In fact, Revolver is a much lower component than most of the other content slider libraries out there. In other words, Revolver could be used to mimick another slider, but most other sliders could not do some of what Revolver is capable of. But don't let any of that scare you, it's pretty easy to get started!

Usage

Include js file

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/jquery.revolver.min.js"></script>

html

<div id="my_slider">
    <img class="slide" src="../assets/img/1.png" alt="" />
    <img class="slide hidden" src="../assets/img/2.png" alt="" />
    <img class="slide hidden" src="../assets/img/3.png" alt="" />
    <img class="slide hidden" src="../assets/img/4.png" alt="" />
    <img class="slide hidden" src="../assets/img/5.png" alt="" />
    <img class="slide hidden" src="../assets/img/6.png" alt="" />
</div>

css

#my_slider {
    width: 720px;
    height: 300px;
    overflow: hidden;
    position: relative;
}
#my_slider .slide {
    left: 0;
    position: absolute;
    top: 0;
}
#my_slider .hidden {
    display: none;
}

javascript

#my_slider {
    width: 720px;
    height: 300px;
    overflow: hidden;
    position: relative;
}

#my_slider .slide {
    left: 0;
    position: absolute;
    top: 0;
}

#my_slider .hidden {
    display: none;
}

Documentation