How to set height based on width to maintain aspect ratio?

Hi @michalrama!

The slider becomes smaller when its edge reaches the edge of the browser. So, on a large monitor, the slider is 1290*600px, but if you look at it in a 645px wide browser, it will be 300px high, this is how we keep the aspect ratio.

If you position the slider arrows in the area outside the slider, then on the slider settings -> General tab:
https://smartslider.helpscoutdocs.com/article/1722-slider-settings-general#slider-design
you can use the Padding value to make an area for it.

However, this will make the slider smaller than where you place it, since the padding will also be inside the container. You don’t really need the JavaScript code either, just use Boxed layout instead:
https://smartslider.helpscoutdocs.com/article/1775-boxed-layout
with Upscale – off. Like so, the width of the slider will be a maximum of Slider size – width:
https://smartslider.helpscoutdocs.com/article/2033-what-affects-slider-size#slider-size

Then, again in the General settings:
https://smartslider.helpscoutdocs.com/article/1722-slider-settings-general#slider-design
use the “Align” option to center the slider.

This way, you can specify the width of the slider as you want and you can also include padding.

And the “Hide on” setting for the Arrow:
https://smartslider.helpscoutdocs.com/article/1782-arrow
hides it on mobile by default, so turn it off.

Hello @robertnextendweb

Sorry, I forgot to write that it helped me, so problem solved. Thank you