Control variables

You can use these variables at the Advanced positioning of your Controls:

You can find the advanced positioning in Expert mode.
  • 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 slide canvas.
  • panewidth - The width of the Carousel slider type's pane 3.3.1
  • 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.

Example

1
Fix the arrows at the side of your slides

This is especially useful when you're working with Showcase slider type.

Arrow Align Position
Previous Horizontal - Right (width/2)-(canvaswidth/2)-previouswidth
Previous Vertical - Top (height/2)-(previousheight/2)
Next Horizontal - Left (width/2)-(canvaswidth/2)-nextwidth
Next Vertical - Top (height/2)-(nextheight/2)
2
Placing the bullets below the slider, with the arrows around them

Control Align Position
Arrow - Previous Horizontal - Left (width/2)-previouswidth-(bulletwidth/2)
Arrow - Previous Vertical - Top height
Arrow - Next Horizontal - Left (width/2)+(bulletwidth/2)
Arrow - Next Vertical - Top height
Bullet Horizontal - Left (width/2)-(bulletwidth/2)
Bullet Vertical - Top height+(nextheight/2)-(bulletheight/2)

If you want to increase the distance between the slider's bottom and the controls, just write the number after the vertical position with a + sign. E.g. if you want to make the controls 10px lower, use:

Control Position
Arrow - Previous height+10
Arrow - Next height+10
Bullet height+(nextheight/2)-(bulletheight/2)+10
Do not use px values there, only numbers! Characters like px will mess up the calculation!
3
Position the autoplay control in the middle

To put a control in the center, you will need to position it half the size of the slider lower, but then it would be too low, so you have to put half of it's size higher. This can be done with the height, width, autoplayheight and autoplaywidth variables. It doesn't matter, if you position it from the left or right, bottom or top, because middle is middle from every side.

So the half of the slider's width is width/2, and the half autoplay width should be removed: width/2-autoplaywidth/2. This will be the horizontal position. Then the half of the slider's height is height/2, and by removing half of the autoplay's height we have the vertical position too: height/2-autoplayheight/2