Easy Multiple Slider Plugin For jQuery - Fraction Slider

Easy Multiple Slider Plugin For jQuery - Fraction Slider
File Size: 204KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2015

Fraction Slider is a jQuery plugin that allows you to animate multiple elements in unlimited sliders. Each element's animation can be controlled by using data-* attribute.


  • Unlimited elements
  • Many transition effects
  • Unlimited slides
  • Background animation
  • Full control over each element
  • Opensource and free

How to use it:

1. Include jQuery Library and FractionSlider.js

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fractionslider.js"></script>

2. Include FractionSlider CSS to style the plugin

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

3. Markup. 

<div class="slider">
<div class="slide"> 
<img src="images/01_box_top.png" width="361" height="354" data-position="-152,142" data-in="left" data-delay="200"> 
<img src="images/01_box_bottom.png" width="422" height="454" data-position="138,-152" data-in="bottomLeft" data-delay="200"> 
<img src="images/01_waves.png" width="1449" height="115" data-position="240,17" data-in="left" data-delay="">
<p data-position="30,30" data-in="top" data-step="1" data-speed="500" data-out="top" data-ease-in="easeOutBounce">jQuery Fraction Slider</p>
<p data-position="90,30" data-in="left" data-step="2" data-speed="500" data-delay="500">animate multiple elements</p>
<p data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-speed="500" data-delay="3000">full control over each element</p>
<p data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-speed="500" data-delay="4500">opensource and free</p>
<img src="images/01_outofthebox.png" width="652" height="559" data-position="20,330" data-in="bottomLeft" data-delay="500"> 

4. Call the plugin

		'fullWidth': true // Full width, true of false

Change Log:

v0.9.103 (2014-01-11)

  • bugs fixed

v0.9.100 (2013-11-19)

  • bugs fixed

v0.9.95 (2013-07-17)

  • bugs fixed

v0.9.6 (2013-04-19)

v0.8.3 (2013-03-26)

  • maintain chainability

v0.8.2 (2013-03-14)

  • Fixed out transition bug

v0.8.0 (2013-02-24)

  • Fixed endless problems

v0.7.3 (2013-02-24)

  • fixed bug: background animation

v0.7.2 (2013-02-21)

  • added fade in and fade out animations
  • added show and hide animations
  • updated the example to use the new animations

This awesome jQuery plugin is developed by jacksbox. For more Advanced Usages, please check the demo page or visit the official website.