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
Step 2 – basic html
Some basic html for the Slider.
<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>
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 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
Step 4 – start the plugin
now you can start the slider. just add this to your main js file:
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