Here you can find out how to control the slider layout and find what layout types are supported.
Boxed layout
layout:'boxed'
The default slider layout is boxed. This layout type sizes the slider based on the width and height slider options.
Fullwidth layout
layout:'fullwidth'
Fullwidth layout slider always fills the browser horizontal space whether slider locates inside a wrapper or not.
Fullscreen layout
layout:'fullscreen'
This layout fills entire browser viewport. You may need to reserve some space on the top or bottom of the slider by fullscreenMargin slider option. For example fullscreenMargin: 100 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.
Autofill layout
layout:'autofill'
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 autofillTarget. To change the target element, you can set any CSS selector as the autofillTarget option value.
Partial view
partialView:true
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 partialMinSpace in pixels. It reserves the space in small screen sizes.
Note: This option is added by partialView addon. Make sure the slider script package contains this addon. For more info check out Building slider script article.
Other slider layout options
Here you can find the list of other slider layout options
| Option name | Default value | Description | Related addon |
| width | 300 | The slider width and the slides content wrapper width. It is also effective in calculating the slider aspect ratio. |
– |
| height | 150 | The slider height. An object value specifies the slider height at every specific break points. For more information check out controlling<br /> slider height article. |
– |
| breakpoints | Breakpoints object | This option defines breakpoints for the slider. For more information check out Breakpoints article. |
– |
| keepAspectRatio | true | Keeps the slider aspect ratio on resize. | – |
| narrowLayoutOn | ‘tablet’ | 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 article. | – |
| minHeight | 0 | Specifies min height value of the slider. It prevents slider to shows too narrow in small screens. |
– |
| maxHeight | 0 | Specifies max height value of the slider. | – |
| heightLimit | true | Prevents the slider height gets taller than the specified height option value. | – |
| autoHeight | false | Automatically changes the slider height to fill the selected slide. Enabling this option overrides all other height sizing options. |
autoHeight |
| smoothHeight | true | Enables smooth height change that only works if autoHeight is enabled. |
autoHeight |
| smoothHeightDuration | 0.5 | The transition duration of changing slider height in seconds. Only works if?autoHeight and?smoothHeight are enabled. |
autoHeight |
| smoothHeightEase | Power3.easeInOut | The smooth height transition easing function. You can find available easing functions in this article. |
autoHeight |
| partialView | false | Shows partial of next and previous slides at both sides of the selected slide. | partialView |
| partialMinSpace | 30 | The minimum space of both sides from the slider in small screen sizes when partial view option is enabled. |
partialView |
| sizingReference | ‘view’ | 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 and view. View value refers to the slides area size. |
– |
| breakPointClass | true | Adds breakpoints helper class names to the slider element. | – |
| overflowFix | true | Fixes the unexpected page horizontal scroll in fullscreen layout. | – |
| centerControls | true | Aligns slider UI control to center. It is affective with fullwidth or fullscreen layout. |
– |