Widget variables

For simpler use of widgets and easier positioning we made variables. You can use your own formulas to calculate your widgets position, width or height.

  • outerwidth – the width of the slider with widgets
  • outerheight – the height of the slider with widgets
  • width – the width of the slider without widgets
  • height – the height of the slider without widgets
  • canvaswidth – the width of the canvas
  • canvasheight – the height of the canvas

To see what’s the difference between canvas and slider width go to this page, and look under the Slider size title.

  • autoplayheight – the height of the autoplay
  • autoplaywidth – the width of the autoplay
  • barheight – the height of the bar
  • barwidth – the width of the bar
  • bulletheight – the height of the bullets
  • bulletwidth – the width of the bullets
  • htmlheight – the height of the html widget
  • htmlwidth – the width of the html widget
  • indicatorheight – the height of the indicator
  • indicatorwidth – the width of the indicator
  • marginbottom – bottom margin of the slider
  • marginleft – left margin of the slider
  • marginright – right margin of the slider
  • margintop – top margin of the slider
  • nextheight – the height of the next arrow
  • nextwidth – the width of the next arrow
  • previousheight – the height of the previous arrow
  • previouswidth – the width of the previous arrow
  • shadowheight – the height of the shadow
  • shadowwidth – the width of the shadow
  • thumbnailheight – the height of the thumbnail
  • thumbnailwidth – the width of the thumbnail

How to use them?

You can put these variables into the input box of the widgets positions, width and height. If you want to calculate with them, then put it in, for example: height-barheight+indicatorheight. You can also use numbers, which will be calculated as pixels. If you are using variables, then the pixel/percentige unit won’t matter any longer, you can leave it on any of them, the result will be the same.

Example 1

I want to make a slider which has a bar near a vertical thumbnail.

Step 1

Let’s create a new slider with some slides.

Step 2

Pick a vertical thumbnail.

Step 3

Choose a bar with the same settings as I have.
Now it should look like this:

Step 4

Go to your widgets -> bar and let’s put this bar into a new position. Give him thumbnailwidth to the left position. And give him a height-barheight to the top position. (It’s the same as a bottom:0, but this is for the example)

Step 5

Let’s change his width to fit in. We will do it with width-thumbnailwidth.
This is what it should look like:

Example 2

Now I want to give an indicator over the bar.

Step 1

Choose the stripe indicator. I’m gonna put it a little bit lower, to show you how long it is, because it would go under the thumbnails if it’s higher.

Step 2

I want the same width as the bar, so the formula is the same: width-thumbnailwidth
The left position is the same too, as the bars: thumbnailwidth
And the top position is going to be height-barheight-indicatorheight because you want to put it first under the slider, then you want to put it higher with the height of the bar, and finally you want to put it higher with the height of the indicator. You can make it easier by choosing bottom instead, and then you just have to handle the bars height with barheight and the result is the same.

Example 3

Give it some arrows.

Step 1

Choose arrows
But I can’t see the left one, and the right one is not in the middle, so let’s fix that.

Step 2

Give thumbnailwidth to the left position.

Step 3

To put this arrow in the middle we have to get the half of the sliders height, and the half of the arrows height if you are calculating the position from the top. So our formula is: height/2-previousheight/2
The arrows have the same height in my example, so you can use either of them.
You can play with the numbers, if you would like to put it not in the middle of the slider, but in the middle of the image, then extract the half of the bars height and half of the indicators height too.

Example 4

Autoplay in the middle.

Step 1

Choose an autoplay button.

Step 2

Add the width of the thumbnails widget and half of the bars width to the left, and remove half of the autoplay buttons width from it.

Step 3

Add half the height of the thumbnails to the bottom and remove half the height of the autoplay button.

Why is this better then just writing the calculated numbers in it?

If you are using variables, and you want to change the looks, then you don’t have to recalculate, and rewrite every widget position and width. If you are changing the width of the object, which is your reference point, then the other objects will change to it. For example my sliders thumbnail part is too big, so I’m just gonna change the 300px width to 150px, and this is the result I got:
Still everything in place, and I don’t have to worry about my other four widget.