Easy Multiple Slider Plugin For jQuery - Fraction Slider

Easy Multiple Slider Plugin For jQuery - Fraction Slider
File Size: 205 KB
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.

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)

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.