Here you can find out how to control the slider layout and find what layout types are supported.<\/p>\n
The default slider layout is Fullwidth layout slider always fills the browser horizontal space whether slider locates inside a wrapper or not.<\/p>\n This layout fills entire browser viewport. You may need to reserve some space on the top or bottom of the slider by Slider fills another element in the page. The default target element is the slider’s parent element, but you can change the target element by Enables the partial view layout. You can enable this option with any other slider layout. It shows other slides before and after the current slide. Also, you can set minimum size of area where the side of the slides are visible by Note: <\/strong>This option is added by Here you can find the list of other slider layout options<\/p>\n <\/p>\n <\/p>\nlayout:'boxed'<\/code><\/p>\nboxed<\/code>. This layout type sizes the slider based on the width<\/code> and height<\/code> slider options.<\/p>\nFullwidth layout<\/h2>\n
layout:'fullwidth'<\/code><\/p>\nFullscreen layout<\/h2>\n
layout:'fullscreen'<\/code><\/p>\nfullscreenMargin<\/code> slider option. For example fullscreenMargin: 100<\/code> decreases slider height to add 100px horizontal space. This option is useful when you have another section in the page like menu bar and you want it to appear above the slider in fullscreen layout.<\/p>\nAutofill layout<\/h2>\n
layout:'autofill'<\/code><\/p>\nautofillTarget<\/code>. To change the target element, you can set any CSS selector as the autofillTarget<\/code> option value.<\/p>\nPartial view<\/h2>\n
partialView:true<\/code><\/p>\npartialMinSpace<\/code> in pixels. It reserves the space in small screen sizes.<\/p>\npartialView<\/code> addon. Make sure the slider script package contains this addon. For more info check out Building slider script<\/a> article.<\/p>\nOther slider layout options<\/h2>\n
\n\n
\n <\/p>\nOption name<\/td>\n Default value<\/td>\n Description<\/td>\n Related addon<\/td>\n<\/tr>\n<\/thead>\n \n width<\/td>\n 300<\/td>\n The slider width and the slides content wrapper width. It is also effective
\nin calculating the slider aspect ratio.<\/td>\n–<\/td>\n<\/tr>\n \n height<\/td>\n 150<\/td>\n The slider height. An object value specifies the slider height at every specific
\nbreak points. For more information check out controlling<br \/>\nslider height<\/a> article.<\/td>\n–<\/td>\n<\/tr>\n \n breakpoints<\/td>\n Breakpoints object<\/td>\n This option defines breakpoints for the slider. For more information check out
\nBreakpoints<\/a> article.<\/td>\n–<\/td>\n<\/tr>\n \n keepAspectRatio<\/td>\n true<\/td>\n Keeps the slider aspect ratio on resize.<\/td>\n –<\/td>\n<\/tr>\n \n narrowLayoutOn<\/td>\n ‘tablet’<\/td>\n It gets a breakpoint name, so it will determine in what devices, the slider layout switches to narrow size. For more information about responsiveness and layout check out Breakpoints<\/a> article.<\/td>\n –<\/td>\n<\/tr>\n \n minHeight<\/td>\n 0<\/td>\n Specifies min height value of the slider. It prevents slider to shows too narrow
\nin small screens.<\/td>\n–<\/td>\n<\/tr>\n \n maxHeight<\/td>\n 0<\/td>\n Specifies max height value of the slider.<\/td>\n –<\/td>\n<\/tr>\n \n heightLimit<\/td>\n true<\/td>\n Prevents the slider height gets taller than the specified height option value.<\/td>\n –<\/td>\n<\/tr>\n \n autoHeight<\/td>\n false<\/td>\n Automatically changes the slider height to fill the selected slide. Enabling
\nthis option overrides all other height sizing options.<\/td>\nautoHeight<\/td>\n<\/tr>\n \n smoothHeight<\/td>\n true<\/td>\n Enables smooth height change that only works if
\nautoHeight<\/strong> is enabled.<\/td>\nautoHeight<\/td>\n<\/tr>\n \n smoothHeightDuration<\/td>\n 0.5<\/td>\n The transition duration of changing slider height in seconds. Only works
\nif?autoHeight<\/strong> and?smoothHeight<\/strong> are enabled.<\/td>\nautoHeight<\/td>\n<\/tr>\n \n smoothHeightEase<\/td>\n Power3.easeInOut<\/td>\n The smooth height transition easing function. You can find available easing
\nfunctions in this article.<\/a><\/td>\nautoHeight<\/td>\n<\/tr>\n \n partialView<\/td>\n false<\/td>\n Shows partial of next and previous slides at both sides of the selected slide.<\/td>\n partialView<\/td>\n<\/tr>\n \n partialMinSpace<\/td>\n 30<\/td>\n The minimum space of both sides from the slider in small screen sizes
\nwhen partial view option is enabled.<\/td>\npartialView<\/td>\n<\/tr>\n \n sizingReference<\/td>\n ‘view’<\/td>\n This option lets you set how slider finds the breakpoint, whether relative to the window, or where the slider is located in the page. Possible values are window<\/code> and view<\/code>. View value refers to the slides area size.<\/td>\n–<\/td>\n<\/tr>\n \n breakPointClass<\/td>\n true<\/td>\n Adds breakpoints helper class names to the slider element.<\/td>\n –<\/td>\n<\/tr>\n \n overflowFix<\/td>\n true<\/td>\n Fixes the unexpected page horizontal scroll in fullscreen layout.<\/td>\n –<\/td>\n<\/tr>\n \n centerControls<\/td>\n true<\/td>\n Aligns slider UI control to center. It is affective with fullwidth or fullscreen
\nlayout.<\/td>\n–<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","type":"solution"}