vSlider – WordPress Image Slider Plugin
July 14, 2009 by Stefan · 190 Comments
vSlider is a jQuery based image slide show script that can display specific images on your WordPress based website with fading or sliding transitions. This way you can future the more important pages or products from your website or even other websites. How is different vSlider from any other WordPress image slider plugins? The answer is simple! It makes use of the core WordPress jQuery library, this makes it very tiny, about 20 kb, and you don’t have to have any knowledge of coding for using it! But the best part is just to come! It can use images from your posts using custom fields or scanning for images in the post to feature your latest posts from a specific category (for example a featured category), this way with every new post the slider will automatically update it self, so NO extra work for you. Or you can add your own images and where each image links to. vSlider is tested in different browsers and all settings are made from an easy to use options page. Do I mention that is free?
You can set up:
- How many latest posts to rotate.
- Up to 1o custom images and links.
- Slider width and height.
- Animation Speed.
- Transition mode (fade and slide).
- Customize CSS to integrate it better in your WordPress theme.
Installation:
- Unzip vSlider zip archive and upload it to wp-content/plugins/ folder
- Activate vSlider WordPress plugin
- Go to vSlider Setup options page from your WordPress dashboard and customize the image slider as you wish.
- PHP implementation: Go to Appearance – Editor from your WordPress dashboard and edit your current WordPress theme. Copy this code <?php if (function_exists(‘vSlider’)) { vSlider(); }?> outside of the loop in your theme to where you want the slider to appear (More details about how to insert the code here.).
- Short code implementation: Video demonstration on the plugin options menu.
- Widget implementation: Video demonstration on the plugin options menu.
Usage:
- Set the slider with and height, the animation type, speed, number of post to feature and the featured category from the vSlider options menu.
- Set up custom CSS code for vSlider (for advanced users) from vSlider options menu.
- Add the path to the images and where to link if you want to use custom images.
The vSlider WordPress plugin will scan the posts from the selected category and will show the first image found on the post. The image will be resized as you selected from the slider menu. If the image does not fit well from your post to the slider, simply edit your post, go to custom fields and add a new custom field named “slider” and as value add the path to the image you want to appear in the slider. In this case vSlider will pick the image added in the custom field.
Demo:
On the first page of this site.
Download the vSlider WordPress Plugin
vSlider Options Page
Credits:
Based on jQuery innerfade plugin.
Comments
Trackbacks/Pingbacks
-
[...] In: JQuery plugins 24 Aug 2009 Go to Source [...]
-
[...] Theme Dropdown Many Wp Remix Theme users ask me or on the Wp Remix forum about their theme and vSlider plugin working together. However, they have discovered a problem regarding the dropdown menu going under [...]
-
[...] from my Google Analytics account, this tool have quite a success and after the homepage and the vSlider plugin page is the third visited page on this site. This, and a message sent by one of the users makes me [...]
Sorry for Doppelpost. I have found the problem, my theme “mandigo” includes an extra jquery.js after i delete this it works.
Hi all !
I try to make this work, but when I add the “slider” custom field data, since I update the post to change to take effect, the custom field disappears ! no way to keep this custom field.
and I have’nt the integrated fields that I’ve seen in the video.
I had to have delete the widget implementation part in the php file because this was crashing the plugin installation (fatal error in line 147).
What Can I do ?
Stefan,
The version 2 features look terrific but so far it breaks my site: http://www.scienceinpublic.com/stories (wordpress 2.9.1)
As kas j and perhaps others have said above, the “display images from category” option results in a big blank.
A quick turning off plugs in doesn’t seems to solve anything. Could it be Thesis (the template v1.6)?
Is there a 1.2 download anywhere so I can roll back my install?
Thanks and regards,
James
Should have also said: Adding a url into the vslider image upload field on a per post basis works fine but a sI have 58 images and growing it’s not an idea solution.
This suggests the “scan the posts from the selected category” function is the culprit/hiccup.
Again thanks,
James
I’m getting the following error
Fatal error: Cannot use object of type WP_Error as array in /home/www/[mydomainname].com/wp-content/plugins/vslider/vslider.php on line 386
I have upgraded my wordpress to the latest version 2.9.2 . Is this plugin not compatible with it?
Thanks
this site use latest WP version and it’s working.
got a problem
how to disable border around vslider, but leave around other images??
now in my css looks that
img {border:#fff 4px solid;}
a img {border-bottom: #b8860b 1px solid;}
any ideas?
Hi
Trying to use vSlider on a Studiopress theme > News Theme
I am not suing the tabber option of News Theme instead I am trying to use vSlider in its place.
I have the code for vSlider in the correct place on the home.php file but only the first image is displayed and it will not transition to the other images . If I change to the default wp theme, the images load and transition as they should,
looking at the News Theme header code it loads a series of js files:
dropwdown.js
tabber clear.js
tabber.js
jquery-1.4.min.js
coda-slider-condensed.js
jquery.easing.1.3.js
these files are loaded after the vSlider code is added.
If I remove the jquery-1.4.min.js line then vSlider works – do you have any idea why there seems to be a conflict with vslider and jquery-1.4.min.js
thanks
OK got it working, the conflict was not a theme issue it was a user issue. I had been trying different image sliders and had left some js calls in the header – went back to original header for the theme and presto no conflicts with vSlider
vSlider loads jQuery from WP core, so might be because the library is loaded twice
After always being updated already
I love this plugin, but on one site I am having a real problem.If I load the short code onto a page, the slider works perfectly. But when I use the widget, the first image loads and it does not rotate. Then I tried loading it into the home page PHP (I am putting this into a home page widget) and same thing, I can get the first image to show but it does not rotate. I am using corporate theme from Studiopress, and I am using customer images. The site is http://www.cookprofitabilityservices.com Makes no sense that it would rotate in the content page, but not from a homepage widget. Also the problem is specific to the homepage widget. It works great in a widget anywhere else. The plugin is great, really good work, but would love some help on this one!
Hi,
Im having a problem with vslider, i added the code to the header and it display the first custom image and link, great!
Then i added more images and links (2-10) but the sliders doesn’t slide/fade. It just stays at image number 1.
I tried adding it to sidebar to see if there was a problem in the header, but same result, no movement, just displaying the first image.
Can you help?
ps. i just tried deactivating all plugins except vslider, and still doesnt rotate
Hi:
Installed this plugin as a widget. Have it pointed to 3 images in a folder on the root directory of my site.
Page loads fine, and vSlider fades from the first image to the second – and then it stops. At the bottom of the browser page I see “Error on page” – I go in and this is the error:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.4; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Fri, 26 Feb 2010 18:16:06 UTC
Message: ’style.removeAttribute’ is null or not an object
Line: 107
Char: 2
Code: 0
URI: http://creationgraphicswebdesign.com/wp-content/plugins/vslider/js/vslider.js
Any help would be greatly appreciated – this is exactly what I was looking for – hope I can get it fixed.
I love the slider. It is great because I can manage it from the backend without messing with confusing custom fields.
There is a conflct with the Headway Wordpress theme in that when I have Vslider enabled I cannot open the visual editor on the theme. It is easy to work around by disabling vslider when I edit the theme but still thought I would let you know.
Thx for the plugin. Using FF and latest WP. Can’t get featured categories or custom fields etc to show up. Custom images works like a charm but shows an empty slide where the featured posts should go. Is this a bug or have I done something wrong? Thanks for any help!