To begin import jQuery and twelve’s slider into your document (either in the “ or at the bottom of the ). I suggest using the Minified format.
Next, set up the markup for you slider. Twelve’s slider uses unordered lists and list items to created the slider. Below is an example of the markup.
-
This is Twelve's Slider
The following are images of twelve
(and myselve
Lastly, call the slides() function on your element.
$("#slider-1").slides();
To set up the slides() function’s options do as follows in the next example but of course do it your way.
$("#slider-1").slides({'width':'50%', 'buttonpos': 'before', 'maxwidth':'500px', 'auto':'true', 'interval' : 10000});
Default is 100%. Can be set to either a percentage or a pixel value. Is probably the only option that you SHOULD set everytime.
Default is null; this causes the slider’s height to equal the largest height amoung the slides. Can be set to pixel or percentage value. If you want the slider to be resonsive it is best to keep this option at its default.
Deault is false. Setting to true will set the slide to auto matically transition after a set ammount of time.
Default is 5000 milliseconds (5 seconds). Controls the time inbetween transitions when ‘auto’ is set to true. Can be set with any value of milliseconds (1000 milliseconds = 1 second).
Default is 500 milliseconds. Controls the speed of the transition. Can be set with any value of milliseconds (1000 milliseconds = 1 second)
Default is ‘slide’. Each of the slides are given a ID that is a combination of the baseID and the number of the slide (ex. ‘slide-0′ or ‘slide-1′). Is a string value.
Default is true. If set to true, Twelve’s slider will automatically create navigational ‘next’ and ‘prev’ buttons.
Default is ‘bottom’. Can be set to ‘bottom’ or ‘top’. Controls the position of the navigational buttons.
Default is ‘>>>’. Set’s the display of the ‘next button’. Must be set as a string but can include HTML elements.
Default is ‘
Default is false; despite this you input MUST be a string. This creates a class name that you can use to turn an into a navigational element.
Let’s say you set the ‘pagination’ value to ‘nav’. If you want to create a button that jumps to the third slide do as follows.
1
The href references the id of the slide you want to jump to and the class name is what you set in the pagination.
Default is ’100%’. Controls the max-width of your slider if ‘width’ is set to a percentage value. Can be a pixel or percentage value.
Default is ’0px’. Controls the min-width of your slider if ‘width’ is set to a percentage value. Can be a pixel or percentage value.
Default is ‘swing’. Must be a valid easing method; if not then the slider will break. To expand you options use the easing plugin (http://gsgd.co.uk/sandbox/jquery/easing/).