vSlider for Developers: Introduction

vSlider is currently one of the most popular image slider plugin available on WordPress. Although it has some cool features but we have been getting a lot of requests via forums, comments and emails. However, adding all these features to one slider would make it cluttered and the lower its performance. Since most of the users would not require all the features which we are being requested, we are starting a tutorial series for those who require some special changes/features in the vSlider.

Download vSlider for Developers.

You can request your own tutorial by simply clicking on contact and sending us the details of the tutorial you would like. Off course the end product of the tutorial is a downloadable vSlider with custom features requested by you.

Let me start introducing vSlider for Developers and Designers. vSlider for Developers targets advanced level WordPress users who create WordPress themes and plugins. Though, it can be tweaked by anyone who knows CSS and javascript.

vSlider Dev. is different from the vSlider on WordPress as it does not use on-page CSS and a lot styling of options have been removed. Instead it uses classes which are manually defined in the style sheet vslider.css by the designers. A CSS file  was necessary to validate WordPress themes using vSlider and subsequent optimization of the code though giving up on the easy to use and manage styling of vSlider.

Rest of the functionality and files remain the same. vSlider for Developers comes with following important files:

  1. vslider.php
  2. js/vslider.js
  3. css/vslider.css

which will be required for adding new functionality and almost used in every tutorial.

August 14, 2011

11 responses on "vSlider for Developers: Introduction"

  1. why does this plugin keep cutting of my images or resizing them horribly. whether the image is large or small, the images don’t get resized right. even when im using very large images, 950 x 600 px, the slider is resizing them and making them pixelated. what’s going on?

    • Disable the auto-resize option in more vslider settings and it won’t be resized. by default it is auto-resized with 80% image quality. In case your images are not of the size of the slider (if they are smaller than slider size), they will be repeated.
      In case you are not comfortable with iamge repetition, just for update we are making an update in vSlider 4.2 version to keep these images center alligned.

      ( v )

      • Having the images center aligned instead of repeating is exactly what I am trying to achieve right now. Do you have an ETA on version 4.2 with this option? I actually need to get the slider up ASAP. Can you provide the code for me to modify in the JS or CSS files? I’m using version 4.1. Otherwise I have to search for a different slider to use but I like everything else about your slider. Thanks.

        • @Tony: This is the biggest issue that we are trying to resolve and removing Timthumb just aggravates this issue. Coin slider uses background-position of the slide images for each small box which goes in for image transition. The issue occurs when the image is smaller than the size of the slider. The image then starts repeating itself. We would have used timthumb function to create a new image from the small image so that it would look like center aligned.
          This is the summary so far and we are not sure which way to go. So we might end up with 2 versions of vSlider for developers.
          And my guess is that this whole thing would take some time. So the only suggestion as of now I have is to create images which equal to or larger in size than of vslider or simply use auto resize.
          If I am not clear here, I would like you to create a topic in the forums so that we could notify you of updates.

          Thanks,
          ( v )

          • Alright thanks for the info. I’ll check back later.

          • hi, thanks for this plugin, its awesome, if you still have some problems people can add to the css of the image background-size:cover; background-position:center; i solved this way, so i hope it be helpfull for other people

  2. Donde consigo un tutorial completo desde inicio a fin

  3. Is it possible to include a border hover colour option?? If you look at my site you will see I have a standard vSlider installed with custom border colour (light blue), however I would like the border to turn red when the user hovers over the vslider. Is this possible??

  4. Developer Guys, check this out, vSlider is bugsy on Chrome (but I guess, a Chrome-update caused the problem, because this issue is not existed before. WordPress websites with vSlider fall apart, disabling vSlider resolves the problem. http://www.eutheater.hu http://www.eskuvo-tervezo.hu or check my website given at the comment form.

Leave a Reply

top
Template Design © VibeThemes. All rights reserved.

Privacy Preference Center

Necessary

This cookie is set when you login to your account at VibeThemes. VibeThemes based on WordPress sets this cookie, which indicates when you're logged in, and who you are, for most interface use.

WordPress uses the two cookies to bypass the password entry portion of wp-login.php. If WordPress recognizes that you have valid, non-expired cookies, you go directly to the WordPress Administration interface. If you don't have the cookies, or they're expired, or in some other way invalid (like you edited them manually for some reason), WordPress will require you to log in again, in order to obtain new cookies.

wordpress_logged_in_[hash],wp-settings-{time}-[UID]

Advertising

Analytics

Comments

When you comment on VibeThemes blog, they too get cookies stored on their computer. This is purely a convenience, so that the visitor won't need to re-type all their information again when they want to leave another comment.
The commenter cookies are set to expire a little under one year from the time they're set.

comment_author_{HASH},comment_author_email_{HASH},comment_author_url_{HASH},

%d bloggers like this: