Quickstart

Attention: This is still an beta Version – there might be bugs, errors and other nasty stuff. Please let me know if you discover any problems.

 

Step 1 – including styles & scripts

<link href="fractionslider.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="jquery.fractionslider.js"></script>

 

Step 2 – basic 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 class="fs_loader"><!-- shows a loading .gif while the slider is getting ready --></div>
</div>

You can customize the fs_loader class to you needs with you own css.

 

Step 3 – objects to animate

You can use all html elements in the slider and style them freely with your own css.
To get the element to work with fraction Slider just add the data-position attribute.
data-position takes to arguments, top and left (in px), separated 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 alt="" src="path/to/image" data-position="100,100" />

 

Step 4 – start the plugin

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

jQuery(window).load(function(){
  $('.slider').fractionSlider();
});

et voila – the slider should be running!

 

Step 5 – customize objects & slider

Now that you know do basics, its time to play with all the fun stuff included in the plugin:

Choose slide transitions, animations, timings, and other stuff with element options

Set some defaults with the plugin options