Control variables

☝️ Note: This option is only available in the Pro version!

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

  • 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.
  • canvasheight - The height of the slide canvas.
  • paneWidth - The width of the Carousel slider type's pane
  • 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.
  • 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.


The table at each example represents how the Advanced position should be set up.

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 - Left (width/2)-(canvaswidth/2)-previouswidth
Previous Vertical - Top (height/2)-(previousheight/2)
Next Horizontal - Right (width/2)-(canvaswidth/2)-nextwidth
Next Vertical - Top (height/2)-(nextheight/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
⚠️ Warning: Do not use px values there, only numbers! Characters like px will mess up the calculation!
Placing the arrows under the slider

Control Align Position
Arrow - Previous Horizontal - Left width/2-previouswidth-10
Arrow - Previous Vertical - Top height+previousheight
Arrow - Next Horizontal - Right width/2-nextwidth-10
Arrow - Next Vertical - Top height+nextheight
Keep the controls beside the slide content
At the Team Slider you can keep the thumbnails at the size of the slide with the following positioning:
Align Position
Right width/2-canvaswidth/2
Bottom 0

Here's the after result:

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 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.