How to use

Here is an quick example to get startet. (for more information on general- and single element-options please look here)

include css and js

<link rel="stylesheet" href="fractionslider.css">

<script src="jquery-1.9.0.min.js" type="text/javascript"></script>

<script src="jquery.fractionslider.js" type="text/javascript" ></script>

HTML

Some basic html for the Slider.

<div class="slider> <!-- your slider container -->

<div class="slide> <!-- all elements for the first slide --> </div>

<div class="slide> <!-- all elements for the second slide --> </div>

<!-- and so on -->

</div>

Elements

You can use all html elements in the slider and you can style them freely with custom css. To get the element to work with fraction Slider just add the data-position attribute. data-position takes to arguments, top and left (px), seperated by comma. top defines the y-offset from the top corner of the slider, left defines the x-offset from the left corner of the slider

example:

<img src="path/to/image" data-position="100,100">

Start the Plugin

now you can start the slider. just add this to your main js file:

jQuery(window).load(function(){

$('.slider').fractionSlider();

});