vSlider Setup Part 1

Setting up vSlider is pretty simple. The default settings allow use to simple start using vSlider without much changes required. However, we have given all possible options to customize vSlider and give it a unique look and feel.

In this tutorial we will discuss on  “How to customize  vSlider?”

Once you have installed vSlider you will see a vSlider menu at the bottom of your WordPress dashboard menu on the right, with a green colored “v” icon. To start with the customization click on the “vSlider” tab in the drop down of vSlider and click on “Edit” to open the vSlider settings page.

In this tutorial we will cover the “General settings” of vSlider, following are the details explanation of parts in the General settings in Edit vSlider :

1. Image Width and Height : This option helps you to give the width and height (in pixels) of the vSlider and the images
in it. This option gives a fixed width and height to the vSlider.

2. Squares per width per height : In vSlider squares appear in the image transitions i.e. when one slide changes to the other slide as shown in the vSlider below. This feature gives you an option on how fine you want the image transitions to be. Indirectly giving an option to customize the square width as well as height

3. Delay between images (in ms) : Delay tells you for how much time(in milliseconds) you want to display each slide or image.

4. Delay between squares(in ms): Delay between squares tells you the time (in milliseconds) between the one square transition to the other. Keep in mind that Delay between squares should always be less than delay between images for a proper image transition effect.

5. Opacity of title and navigation: Opacity lets you change the opacity of the title/ description(if added) on each slide and the navigation buttons.

6. Speed of title appearance(in ms): The speed of title appearance determines how fast the title/description appears on slide after the slide or image loads in the vSlider.

7. Effect : Effect refers to the image transition between the images or slides. The effects can be Random, Swirl, Rain, Fade, Curtain, Alternate Curtain, Winding, Alternate Winding or Diagonal.By default it is the combined transition of all the effects. To see how a particular effects work, hover your cursor over the question mark “?”. For more information you can also refer to this tutorial  “how to create your own  image transition effect in vSlider WordPress plugin“.

8. Show navigation buttons : vSlider gives you the option to show or hide your navigation buttons. If you want to show buttons select “Yes” else vice versa.

9. Sticky navigation buttons: You have the option to hide or show the navigation buttons.If you select “yes”, the navigation buttons will be visible permanently whereas if you select “No”, the navigation buttons will only be visible when the user hovers over/near the slider.

10. Show images as links :If you want that the images should link to some other page select “Yes”. Option for adding the link is provided in the “Custom Images” on the right hand side.

11. Show image buttons : Image buttons appear when you select “Yes”.The number of images buttons are equal to the number of images in the slider as shown in the slider above(the three round buttons at the bottom of the slider).

12. Pause on mouse hover: This option allows you to pause the image when the user hovers over the image.Select “Yes” to pause.

13. Border width/ height : The function allows you to add border to your slider.This option lets you change the order height and width.

14. Border Color: Select the border color from unlimited colors according to your vSlider requirements.

15. Font Family : Select the font of the title and description.

16. Title Font size : Select the font size of the title appearing in the slider.

17. Text font size: This option lets you select the font size of the description appearing below the title in your vSlider.

18. Text color : You can also select the text color of the title and the description in the slider.

19. Background color : This function gives you the option to change the background color of the title as well as description.

After any general setting has been changed, remember to save the settings by clicking on “Save Settings” option.

Next tutorial covers “How to customize more vSlider Settings“.