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.

11 comments

  1. mel says:

    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?

    1. Mr.Vibe says:

      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 )

      1. Tony says:

        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.

        1. Mr.Vibe says:

          @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 )

          1. Tony says:

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

          2. Jose Mussa says:

            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. cesar says:

    Donde consigo un tutorial completo desde inicio a fin

  3. Raven Garcia says:

    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. Endre says:

    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.

    1. Mr.Vibe says:

      Thanks for pointing this out. Will check ..

Leave a Reply to cesarCancel reply

%d bloggers like this: