Javascript slider

vSlider Instructions

Download the files : http://www.megaupload.com/?d=8LEPR4NK

The vSlider is very easy to use, follow the steps


1.Import jQuery and vjquery.vslider.js in your page.



2. Now create an unordered list with li items consisting of an image wrapped by optional anchor tag if you want to link your slide to somewhere. Optionally, you can use a span tag after the anchor tag which contains slide description.

Code:


<ul id="test">
<li><a href="http://creative-nation.net"><img src="images/1.jpg" alt="" /></a> <span>SUPPORTS CAPTIONS , Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel massa ac dui convallis rhoncus. Pellentesque hendrerit, dui auctor bibendum consectetur, quam ipsum rhoncus orci,</span> </li>
<li><a href="http://creative-nation.net"><img src="images/2.jpg" alt="" /></a> <span> consectetur adipiscing elit. Fusce vel massa ac dui convallis rhoncus. Pellentesque hendrerit, dui auctor bibendum consectetur.</span></li>
<li><a href="http://creative-nation.net"><img src="images/3.jpg" alt="" /></a></li> <li><a href="http://creative-nation.net"><img src="images/4.jpg" alt="" /></a></li> <li><a href="http://creative-nation.net"><img src="images/5.jpg" alt="" /></a></li> <li><a href="http://creative-nation.net"><img src="images/6.jpg" alt="" /></a></li>
</ul> 

3. Finally call the jQuery plugin.

Code:


<script type="text/javascript"> $(function(){
$("#test").vSlider();
}); </script>

Customisability

v slider provides lots of options to give you as much flexibility as it can. In this section we are going to look at the options in detail.
time option

Option 1, Set the delay
By default the delay is set to 4000. Note 4000 refers to 4 seconds. Value is given in milliseconds. Usage -

Code:


<script type="text/javascript"> $(function(){
$("ul").vSlider({ time:2000 }); // now sets the time delay between transitions to 2 seconds
}); </script>


Option 2, Set the width and height

This options provides the dimension values of the slideshow. Width specifies the width of the slideshow and height specifies the height of the slideshow. Note, images larger than specified dimensions are clipped off. Default values are 600 by 350px. Usage -

Code:


<script type="text/javascript"> $(function(){
$("ul"). vSlider ({ width:670, height:500 }); // now sets the width and height to 670 by 500 px. });
</script>


Option 3, Transition effects

This option is used to specify the transition effect required. By default it applies all 10. Below is the list of values that you can pass for a specific effect -
Fade 0 cubegrow 1 stripfade 2 striphalf 3 cubesidegrow 4 curtainsright 5 randombricks 6 waveleft 7 blindsleft 8 Maskvertical 9
Effect Name
Effect value

Code:


<script type="text/javascript"> $(function(){
$("ul").vSlider({ effect:1 }); // applies growing cube effect on all the elements. });
</script>


More detailed instructions are available through a PDF in the download folder.

*This slider is sourced from vandley design