Welcome to Creative Nation!

Welcome to Creative Nation, . Feel free to browse our forums and help yourself to all our free tutorials, images, and recources!

Download

To download this script go back to article »

Member Login

Lost your password?

Not a member yet? Sign Up!

JavaScript Slider


The next generation of web design.


You are not connected. Please login or register

JavaScript Slider

View previous topic View next topic Go down  Message [Page 1 of 1]

1 JavaScript Slider on 9/1/2011, 6:42 am

Daniel

avatar

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

2 Re: JavaScript Slider on 9/1/2011, 12:39 pm

Tilum

avatar
DOES YOU HAVE AN EXAMPLE?

~ Tilum

3 Re: JavaScript Slider on 9/1/2011, 1:09 pm

bHulleT.w

avatar

Yeh, we need example for this Smile

4 Re: JavaScript Slider on 9/1/2011, 2:44 pm

virtuosity

avatar
^ I am with those two Big Grin

Examples/screenshots help.

5 Re: JavaScript Slider on 9/1/2011, 7:05 pm

Daniel

avatar

Hence why its in tips n tricks, the first code section is a basic example lol, and there is a detailed manual in the download Smile

6 Re: JavaScript Slider on 9/1/2011, 7:05 pm

Daniel

avatar

Ill do an example soon

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum

.

Free phpbb forum | © PunBB | Free forum support | Contact | Report an abuse | Free forum.