{"title":"Controlling Slider Height","id":51992,"link":"https:\/\/env.averta.net\/en\/step\/controlling-slider-height\/","parent":[51847],"content":"<p>Master Slider gives you a variety of options to control slider height. You can set different height sizes relative to the active <a href=\"https:\/\/env.averta.net\/en\/step\/defining-breakpoints\/?b=51990,51990\" title=\"Defining Breakpoints\">breakpoint<\/a> or enable auto height option. In this article you can find all possibilities of controlling height size.<\/p>\n<h2>Height option<\/h2>\n<p>This option (<code>height<\/code>) specifies slider height in pixels. It also supports multiple values to change slider height at each <a href=\"https:\/\/env.averta.net\/en\/step\/defining-breakpoints\/?b=51990,51990\" title=\"Defining Breakpoints\">breakpoint<\/a>. To set multiple values, you need to define an array. The order of array indexes should be the same as?breakpoints order from large to small. For example <code>height: [600,500,300]<\/code>, first index specifies the slider height in desktop size and it changes to 500px on tablet size then 300px on phone.<\/p>\n<h2>Other height related options<\/h2>\n<table>\n<thead>\n<tr>\n<td>Option name<\/td>\n<td>Default value<\/td>\n<td>Description<\/td>\n<td>Related addon<\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>minHeight<\/td>\n<td>0<\/td>\n<td>Specifies min height value of the slider. It prevents slider to appear too narrow<br \/>\nin small screens.<\/td>\n<td>&#8211;<\/td>\n<\/tr>\n<tr>\n<td>maxHeight<\/td>\n<td>0<\/td>\n<td>Specifies max height value of the slider.<\/td>\n<td>&#8211;<\/td>\n<\/tr>\n<tr>\n<td>heightLimit<\/td>\n<td>true<\/td>\n<td>Prevents the slider height gets taller than specified height option value.<\/td>\n<td>&#8211;<\/td>\n<\/tr>\n<p><!-- auto height addon --><\/p>\n<tr>\n<td>autoHeight<\/td>\n<td>false<\/td>\n<td>Automatically changes the slider height to fill the selected slide. Enabling this<br \/>\noption overrides all other height sizing options.<\/td>\n<td>autoHeight<\/td>\n<\/tr>\n<tr>\n<td>smoothHeight<\/td>\n<td>true<\/td>\n<td>Enables smooth height change, only works if<br \/>\n<strong>autoHeight<\/strong> is enabled.<\/td>\n<td>autoHeight<\/td>\n<\/tr>\n<tr>\n<td>smoothHeightDuration<\/td>\n<td>0.5<\/td>\n<td>The transition duration of changing slider height in seconds. Only works if<br \/>\n<strong>autoHeight<\/strong> and?<strong>smoothHeight<\/strong> are enabled.<\/td>\n<td>autoHeight<\/td>\n<\/tr>\n<tr>\n<td>smoothHeightEase<\/td>\n<td>Power3.easeInOut<\/td>\n<td>The smooth height transition easing function. You can find available easing functions<br \/>\nin <a href=\"https:\/\/env.averta.net\/en\/step\/adding-easing-functions\/?b=51985,51985\" title=\"Adding Easing Functions\">this article.<\/a><\/td>\n<td>autoHeight<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","type":"solution"}