FractionSlider

Quickstart

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>

 

Demo     Download

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

<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();
});

Step 5 – customize objects & slider

{
'slideTransition' : 'none', // default slide transition
'slideTransitionSpeed' : 2000, // default slide transition time
'slideEndAnimation' : true, // if set true, objects will transition out before next slide moves in     
'position' : '0,0', // default position | should never be used
'transitionIn' : 'left', // default in - transition
'transitionOut' : 'left', // default out - transition
'fullWidth' : false, // transition over the full width of the window
'delay' : 0, // default delay for elements
'timeout' : 2000, // default timeout before switching slides
'speedIn' : 2500, // default in - transition speed
'speedOut' : 1000, // default out - transition speed
'easeIn' : 'easeOutExpo', // default easing in
'easeOut' : 'easeOutCubic', // default easing out

'controls' : false, // controls on/off
'pager' : false, // pager inside of the slider on/off OR $('someselector') for a pager outside of the slider
'autoChange' : true, // auto change slides
'pauseOnHover' : false, // Pauses slider on hover (current step will still be completed)

'backgroundAnimation' : false, // background animation
'backgroundElement' : null, // element to animate | default fractionSlider element
'backgroundX' : 500, // background animation x distance
'backgroundY' : 500, // background animation y distance
'backgroundSpeed' : 2500, // default background animation speed
'backgroundEase' : 'easeOutCubic', // default background animation easing

'responsive' : false, // responsive slider (see below for some implementation tipps)
'increase' : false, // if set, slider is allowed to get bigger than basic dimensions
'dimensions' : '1000, 400',
/* IMPORTANT:
if you use the responsive option, you have to set dimensions to the origin (width,height) in px
you use for data-position,heights of elements, etc. */

'startCallback' : null, // callbacks, see below for more information on callbacks
'startNextSlideCallback' : null,
'stopCallback' : null,
'pauseCallback' : null,
'resumeCallback' : null,
'nextSlideCallback' : null,
'prevSlideCallback' : null,
'pagerCallback' : null

}

How to: Responsive

If you want the slider to be responsive, please read the following instuctions:

  • give the element on which you call the plugin a exact width or 100% and height: auto
  • if you use text set the line-height for elements inside the slider to 100%
  • set paddings and margins in % not in px

Callbacks

The callback functions will be called, after an event happened. E.g. the pauseCallback function will be called every time the slider pauses.

Usage:

'pauseCallback': function(el, currentSlide, lastSlide, step ){
  // your custom code
  /* paramters:
  el = the slider element
  currentSlide = the current slide (in case of nextSlideCallback etc. its the new slide)
  lastSlide = the last/previouse slide
  step = the current step
  */
}

 

 

FractionSlider

| CSS3, HTML5, Javascript, jQuery Plugins, Slider | 0 Comments
About The Author
-