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.
Hi. I am a little new to wordpress. Great plugin however. I have used Drupal and JOOMLA a fair bit, and my own CMS Chameleon and I must say I get a little confused with Wordpress. Anyway, I got your slider working on the ‘home’ page, which is just fine. But when you hit one of the recent posts from the right side bar the screen goes wonky. I don’t know whether the slider should be there or not. If you choose one of the Pages, the slider goes away. I inherited this page trying to help the lady out! any clues I would be grateful.
Thanks again.
Mark.
I’m getting the exact same issues. Any ideas?
‘SOK. I just discovered the difference between ‘index’ and ‘home’ in this funny system!
Thanks,
Mark.
hi,, i have uploaded all the files and followed your instructions.. however i’m unable to see any slider in my blog.. i have only one post, will this be the problem
Hey,, now it’s working fine … thanks
Hi there,
love your plugin and have many uses for it.
The only improvement I’d lie to see is a transition feature between the slides rather than a blank, so that one image replaces the other seamlessly.
That would be awesome!
Thanks much and keep up the good work!
WOLF
Thank you for the kind words. I am not a jQuery specialist and will ask for help. If someone will want to help on improving the java script just send me a message.
You are welcome! I know that there are various free scripts that handle the transition. That might be of help. I’ll keep looking and let you know in case I find someone who’d be willing to help implement the transition. Thanks much!
Hello,
i have implemented your vslider into my website and i LOVE it!
But there is a problem.
The url doesnt change with the picture if i choose ‘fade’.
There is no problem with ’slide’, but that is not the desired effect for me.
Can you help me?
Thnx, Appz
Hello, thank you for a great plugin.
I have on question about the plugin. I have five different pages in my wordpress setup. Is it possible to have different images for each page? Say I want 5 images in my home page and only 2 different images in my about me page. Is there a workaround to make this happen?
Thank you for a very nice plugin!
You can use custom images and link them to whatever…
I need to know how to create multiple instances of the VSlider. I want to use 3 or 4 sliders with different pictures. There should be a way to have multiple sliders?????
Stefan your reply above sucks!
Someone post how to do this please!
Stefan,
Great work. Best slideshow solution for our needs (and I looked at a lot of them).
My only suggested enhancement would be a randomiser.
Our site http://www.scienceinpublic.com/stories/ has a 58 images slide show (yes, I release you may not have catered for this crazy sort of usage) and as the slide show starts from the beginning after any page load it means many of the images never get seen.
Thanks again,
James
FIrst of all – great Plugin. I have it ALMOST figured out to my liking – I am using the Thesis Theme currently – what I want to do is have the image slider rotate between two images, but I only want to slider to appear on the HOME page – right now it appears above the content area of EVERY page. Does anyone know how I can get it to only show up on the home page?
Thanks!
Matt, you can use if is_home condition for that.
I’m trying to use your (very cool) plugin on a static front page. I want vslider to be on the front page and not on the other pages. I’m using Wordpress as a CMS. This works on my test server but on the web server (earthlink) the vslider is placed on all the pages. Is this normal and is there something I can do to achieve the effect I’m going for?
Looks like you are not using home.php in your theme or might be that the slider is located in the header. In that case you could use if is_home condition and will be displayed only on homepage.
Hi,
I’m using this plugin with the Backstage theme from Woo. It looks great in Safari and Firefox, but I can’t get it to look right in Internet Explorer. Any thoughts? Much appreciate the help…
Hi Thanks this wonderful plugin, while after i follow the instruction to install it, it shows only one static image instead of rotation.
I love this plugin but I cant seem to get it to display any wider than 600 pixels. Even when I change the settings to something like 669 x 264, which I need.
Is there anyway to make this plugin display wider?? Thanks!
The size of the images can be set to any size. Did you checked if the container where you put the slider is not set to width 669px and cuts the images from CSS with overflow:hidden command?
Actually, this was my mistake. I needed to adjust the margin settings for vslider. Thanks for your reply!
Hello,
i need to have a random image of vslide, for don’t have the same image for first, but i don’t know how i can do….
Can everyone help me please.
Thank You so Much
This looks like a really nice plugin.
A couple of things I’d love to see included:
The ability to specific a gallery for display (or to display the gallery for the page the slider is hosted on), as opposed to specifying specific images or post categories.
The ability to NOT slide – so to load up one of the images randomly, and display it without ticking to the next one.
That would make the plugin flexible enough to use everywhere!
Hello Dan, I am working this week to add some extra functions to the plugin and will meet most of your requirements.
The main idea of the slider is to animate the transition when rotate the images. To rotate the images without transition can be achieved with PHP, i will write a tutorial about this.
Sounds great, I’ll keep an eye out for the update.
How can I change the positioning of the vslider? I made a shortcode for vslider so I could put it only on the pages I wanted it on, then put the shortcode inside a positioned div – that didn’t work… then tried inside a table – which also didn’t work… since I guess as long as vslider() is called, it will place it at the top of the content page and not where placed… ?! I’d like it to be right-aligned, with the text wrapping around it.
any advice?
From the option page you can add custom CSS styling to it like floating or whatever.
My webmaster installed this plugin. Good job.
My only suggestion is that instead of limiting it to 5 custom images, it could catch its images from a NextGen gallery.
I tried the setting to catch images from a post category but that doesn’t work. It shows 44 images (not there) and shows now images in the header. Then again, the images are displayed in this post using a NextGen gallery.
Don’t really follow you…
i seem to have the same problem. the plugin doen’t work in the “display images from a specified category” mode. it works in ” custom image” mode.
Terrific plugin. Thank you very much for creating it!
If I needed to have more than 5 image fields under the Custom Image Settings … can I go into vslider.php and add more?
That would also be a nice feature … a field to type in how many image fields you need under Custom Image Settings the fields would be dynamically generated (both image and link fields) based on the number you needed.
At any rate, I would appreciate a little clarification on whether I can do it by modifying the code in vslider.php. Once again, THANK YOU for your great work.
Thank you Otelo for the appreciation. By tomorrow (i hope) the plugin will be updated with the possibility to add up to 10 images. I do not want more because the page can load slower having so many images.
Any ideas i might have are welcomed. You can send me a message and we can chat about it, however, this is an open source project so no other benefit that a credit link.
Great plugin — I love this!
But I can’t get the images centered on my homepage. The slideshow remains left justified.
I tried modifying “vslider Extra CSS” margin settings. None of the changes I made to margins or borders had any affect. If read what i can find on this site and the web.
Any suggestions would be appreciated. I may just add some white to the left of my images.
Thank you for the great work.
Richard, someone did not closed the comments on the homepage.
INSERTED VSLIDER in the home loop -- RICKI PUT VSLIDER below -- RICK
It should be like
<!-- Comment goes here -->This is why the vsldier ID is interpreted as comment so the styling is not applied to it.
Great site by the way!
Stefan,
Thanks so much — sorry this was just a syntax issue.
(In college i spent days debugging a fortran mispelling of pi (p1). Long time ago.)
WORKS GREAT NOW. Thanks again, it really adds a clean touch to my homepage.
It was hard to pick just one image, and thanks to your plugin, i can nicely loop thru 5.
Thanks again, and keep up the great work!
Richard
Happy to hear that. Hope you like the new functions from v2.0 as well.
When I use the plugin as a header image, it has a black border on the top and left side of the image… any tips to rid this? What am I missing?
It must be from your header css, but it’s just a ques. Send me a message with your site link to have a look.
eurostylesalon.com a little proj im doing for a friend, new at this..
Add this to your CSS and the border will disappear.
img{border: 0;
text-decoration: none;
}
A million thanks, you sir; Rock!
I noticed I can set the transition speed but not the # of seconds a particular image stays on the screen before it is replaced.
Is there some code I can edit to make the image stay longer before the next transition?
Thorwald
Did you upgraded to version 2.0? You can set the number of seconds to stay on the screen and also you can randomize the images now. There’s lot more added. Please go to options menu after upgrading and select the source as well (custom images, specific category or scanning for custom fields)
Ups. I didn’t see any note in my plug-in section ‘upgrade available’ I have version 1.2. which we downloaded from Wordpress.org.
We’ll get the new version. Great news!
when i had 1.2 the plugging was working fantastic, after i upgraded it to 2.0 , when i select the specific category , noting is shown expect for a place space. but it is working fine in custom images mode. please help thank you.
How to you keep the image from moving to the right in I.E. 7.0 ???
Hallo Stefan,
having a small problem. i want to use your plugin for a fading effect of the header-image. so i put the PHP-Code in the header.php but something is not working. could u have a look at the website?
http://www.andreas-kimpfbeck.de/kimpfbeck
I´m using the “Mystique”-Theme.
Thanks, Thomas
I found out it´s a problem with the template. with other templates it´s working fine!
Tom
how do i use the home conditional?
I’m having a problem getting the images to show up. The container shows up as a widget on my index page. It links to the post’s page but is a grey box with the missing image icon in it. I don’t have any tables in my db for vscroller. Is there supposed to be one?
Very nice plugin… it works perfectly.
Any ideas to add other transitions in the future? for example something like sliding sideways?
I also posted this problem on your wordpress.org support forum but maybe this is a better forum.
In IE 7.0 the sliding header image loads correctly and then moves half way to the right. This does NOT happen in IE 8, Safari, Firebox or Google Chrome.
I would be really great to have this fixed. It’s a very nice plugin and worth a donation
.
Thorwald
Nice,really nice.
I have been looking for this kind of plugins for a long time. This one is totally meet my needs. Thank you.
What about adding some navigation botton ?
Thanks Stefan for all of the work you have put into this project. It is exactly the thing I need.
I have begun to update a Theme Hybrid theme and want to use your vSlider plugin. However, I need to use different slide shows on different pages. It would be fantastic if this had the capability to have named slide shows, such as: and and similar hooks in the [vslider] short code.
Is there any way this can be done?
Hi bro,
I am very happy to find this plugging this is the real one that i was needing for a long time.
Finally I am using this at http://Vijieya.com a Hotel website . Thanks bro again.
This plugin is great.. But i miss one thing.. A slide to the left or right instead of the one that is now!
If you could add that, this will be the best slideshow plugin ever!!!
PLEASE FIX!
Hey, great plugin indeed, works like a charm.
I’ve tested on Mac Firefox and Safari. Safari displays perfectly, but there’s something weird on Firefox: even if you choose to have no border around the image your sliding, there is a grey border on the top and left side of the image, sounds familiar?
Must be something with the CSS code of the website. Reset the images to text-decoration:none and border:0 from the css. If not, you will have this problems with any images linking somewhere.
Thanks for the reply.
I was a bit confused because it looks perfect on Safari but not Firefox. I’m going to fully check the CSS and see if there’s a border somewhere…
On the plugin CSS of course the border is 0.
It is your theme CSS. Add this to it and you will be ok… must write a tutorial about this…
img{border: 0;
text-decoration: none;
}
omg!!
yes!
it worked!!!
thank you so much!!
Hi,
Do you see a possibility to implement two buttons “next” and “preview”?
Thanks for your feedback.
TIMIT
Perhaps in the near future.
Hey…
Thanks for the plugin. My images don’t seem to be transitioning… I am using custom images with links. The image never moves…
Any ideas/suggestions on where to check to try and fix it?
Thanks
Try to disable other plugins one of the time and see if have conflict with one of them. Please send me the plugin name if it is so.
I disabled all of the plugins except vSlider.
Now I get one transition effect, and then it stops… ?!?
I also checked and I have wp_head(); in my header.php file…
Site in question is located here: http://new.electrosense.co.za/
Thanks.
Here’s another possibility…
http://wordpress.org/support/topic/319767
I notice that my navs stop working on the home page of the site where vSlider is installed… but they work on the other pages where it isn’t installed…
Just a guess
hey mate, love the plugin – it’s everything i need. Except i can’t get the images to rotate… The sidebar widget only displays the first image listed in the “custom images setup”, and doesn’t rotate or anything.
any ideas?
here is the site:
http://kosta-x.com/music/
here are my settings:
http://kosta-x.com/vslider_settings.png
hope to hear back soon, as i would love to be able to use this plugin.
i actually got it working now! I just disabled some plug-ins, including thickbox, and a few others. Seems like they were conflicting with your plug-in.
I would appreciate if you’d send me the plugin names that are in conflict with.
The plugins i had active during the conflict were:
“Thickbox”, “Sponsors Slideshow Widget”, and i think “Post videos and photo galleries”.
I really think the Thickbox plugin was causing the conflict. I think i was using WP version 2.7.
hope that helps Stefan. thanks again for a great plugin!
Hi,
I’m working with your vSlider plugin and the new Genesis StudioPress Executive child theme much like your demo site. I have had wonderful success using vSlider in the homepage widget with image links pointing to a Post. However, I would like the homepage widget links to be directed to a Page not a post. I can add a custom field on a page but I can’t add a category so it doesn’t seem to link up. Can you help me to allow the Vslider widget in this case to go to the Page instead of a Post? Thanks in advance.
Cheers,
Tom
p.s. The site I’m working on is not publicly available on the internet until a product release is made.
Tom, why not use custom images and link them to your pages?
ah, ha! Now I get it! thank you. that worked perfectly! Thank you for such a wonderful plugin! I’ll post the site address when it gets released! Thanks again.
Hi,
I just installed vSlider plugin and I set it all on a custom field and I get no images on my sydebar…
Pedro, did you added the widget to the sidebar as well?
Hi,
Really love the slider, and especially the easy installation. Surprisingly little out there with such a simple customization feature.
I am really trying to make one of the images a short flash animation, sliding into some still pictures. Do you know how I would go about doing that?
Thanks,
Jimmy
I am using the short code and custom images but the image does not change. I have tried it on slide and fade but no transition.
is
wp_head();present in your header.php?I don’t see it. Where in the header.php file should I insert it?
Stefan, this is a terrific plugin. It works so well!
One request – I would love to be able to add different slideshows to different pages.
Right now (I think) I can only add a single slide show…maybe I am wrong.
At this moment only one can be added. Might be on the next update.
!! I’ll be waiting
it would be a nice feature if we can add more one slideshow. hehe..
Hi,
This plugin looks like just the thing I want. Have installed it, activated it, which all seems fine, put 2 images in the custom settings, but on the page it just displays the images on top of each other.
As if the js isn’t working… everything seems fine any ideas where I went wrong?
How do I insert the code
into the custom_functions.php file of the Thesis Wordpress Theme?
/Andreas
nice plugin ,but there 1 problem that how it will show slides in loop, i mean again and again???
please help
Hi,
Great plugin and so easy to install. Unfortunately I can not get the images to rotate; like some of the other people who commented above.
I tried all 3 ways; on home page using the php code right after the ,
in an individual post using the short code, and as a widget in the sidebar.
The first picture shows up and stays static… no other images, no rotation.
I disabled all my plugins except vSlider.
It is such an awesome plugin and I would love to use it. Can you help please?
Thank you.
Custom images link 6 is broken: in the vslider() function, it refers to $vLink_5.
Hi, I am using vSlider as website header. I pasted this code in to my header.php ” ” Now, how can I have different image sets in different pages, I mean, I have same header in all pages and I want to have every page with its own image set.
Is this possible?
Thx for excellent plugin
8 is broken too.
Hi,
This looks like a great plugin, which should do exactly what I want. However, the transition is not happening. I’ve got 3 custom images setup, but it sticks on the first one and does not change. I’m using the shortcode on a page.
I’ve tried disabling all my other plugins, but it’s still not working. Unfortunately, I can’t point you at the website becasue it’s still in development and not publicly available.
Can you help?
Thanks
Stephan, thanks for a great plugin. One question though. I’m developing a site for a charity and really need to make sure everything meets accessibility standards as far as possible; is there a way to control the alt text for each image in the custom images?
I have two gray bars on either side of slider and can’t seem to get them to go away. Tried re-sizing slider box in General Settings tried inserting img{
border: 0;
text-decoration: none;
}
in the CSS. Neither worked. Any ideas?
I really love your Plugin but I have added two custom images and they don’t slide/fade. If I open my homepage with IE I get an Error on this Line jQuery(‘ul#sliderbody’).innerfade({ . I have deactivate all plugins step by step – no effect. Hope you can help me!
PS: wp_head(); is present in my header.php