Easy Multiple Slider Plugin For jQuery - Fraction Slider

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.

Features:

• 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"> 
</div>
</div>

4. Call the plugin.

$(window).load(function(){
  $('.slider').fractionSlider({
    'fullWidth': true // Full width, true of false
  });
});

5. Defaults and options..

// default slide transition
'slideTransition' : 'none', 

// default slide transition
'slideTransitionSpeed' : 2000, 

// if set true, objects will transition out at slide end (before the slideTransition is called)
'slideEndAnimation' : true, 

// default position | should never be used
'position' : '0,0', 

// default in - transition
'transitionIn' : 'left', 

// default out - transition
'transitionOut' : 'left', 

// transition over the full width of the window
'fullWidth' : false, 

// default delay for elements
'delay' : 0, 

// default timeout before switching slides
'timeout' : 2000, 

// default in - transition speed
'speedIn' : 2500, 

// default out - transition speed
'speedOut' : 1000, 

// default easing in
'easeIn' : 'easeOutExpo', 

// default easing out
'easeOut' : 'easeOutCubic', 

// controls on/off
'controls' : false, 

// controls on/off
'pager' : false, 

// auto change slides
'autoChange' : true, 

// Pauses slider on hover (current step will still be completed)
'pauseOnHover' : false, 

// background animation
'backgroundAnimation' : false, 

// element to animate | default fractionSlider element
'backgroundElement' : null, 

// default x distance
'backgroundX' : 500, 

// default y distance
'backgroundY' : 500, 

// default background animation speed
'backgroundSpeed' : 2500, 

// default background animation easing
'backgroundEase' : 'easeOutCubic', 

// activates the responsive slider
'responsive' : false, 

// if set, slider is allowed to get bigger than basic dimensions
'increase' : false, 

// set basic dimension (width,height in px) for the responisve slider - the plugin with position elements with data-position relative to this dimensions (please see the documentation for more info),
'dimensions' : '', 

// callbacks
'startCallback' : null,
'startNextSlideCallback' : null,
'stopCallback' : null,
'pauseCallback' : null,
'resumeCallback' : null,
'nextSlideCallback' : null,
'prevSlideCallback' : null,
'pagerCallback' : null

Change Log:

v1.0.0 (2016-01-26)

• ADD responive letter-spacing

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)

• features updated

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.