Home - maxijb/sliderPlugin GitHub Wiki

To start using this plugin you need the following markup:

  <div id='sliderParent'>

     <ul>

        <li>...</li>

        <li>...</li>

        <li> (n) times</li>

     </ul>

 </div>

To start using the plugin you just need to set by CSS, the width and height of the #sliderParent div. And call

  $('#sliderParent').slider();

That's it!

Of course you can name the parent div as you like, and also you have a lot of configuration you can choose. This are the defaults:

  **paginated** : 1,  // number of lis showing per slide

  continuous : true,  // wheter it is autoslide, controlled by a interval

  vertical : false,  //wheter it is horizontal or vertical

  markers : false,  //does it show markers for each item?

  next : 'next',   //the id (without the #) for the next slide buttton

  prev : 'prev',   //the id (without the #) for the previous slide buttton

  markerContainerId : 'circulos',  //the id (without the #) for the container of the markers for each item

  markerClass : 'circ',  //the class of the markers 

  addButtons : false,   // should th plugin add the next and prev buttons?

  delay : 3000,  // the delay between intervals 

  speed : 600,   // the speed in milliseconds of the slide

  adaptSize : false,  //should on resize event adapt the size of the slider?

  fadeContent: null   // content elements ("p, div") that should fade after each slide  

STYLING:

There is a CSS file, with very basci configuration for styling buttons and markers. You can change there what you need, and don't forget to specifiy a width and height for the parent div. The rest is done inline by the plugin.