Control variables
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.
Example
The table at each example represents how the Advanced position should be set up.
- 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 - 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) - 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
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