Slider Layout

1. Auto Responsive

back to top

Auto Responsive sliders will automatically inherit their parent container’s width, and are great for when you’d like your slider to fit naturally inside your web page’s main content container.

Markup example:

Auto Responsive example with a "max-width" applied:

Complete the Auto-Reponsive setup by setting the "sliderLayout" to "auto" in the slider's main settings script.

2. Full Width

back to top

Slider will break out of its parent container to display full-width across the screen.

Markup example:

Complete the Full Width setup by setting the "sliderLayout" to "fullwidth" in the slider's main settings script.

3. Full Screen

back to top

Slider will break out of its parent container to display full-screen.

Markup example:

Complete the Full Screen setup by setting the "sliderLayout" to "fullscreen" in the slider's main settings script.

4. Additional Layout Options

back to top
Overflow Hidden:

Prevent content from bleeding outside the slider’s main container.

Respect Aspect Ratio:

Creates a “locked” ratio for the slider, where both the width and height always expand/contract together when the slider resizes.

Min Height:

Useful for Auto Responsive and Full Width sliders.  Ensures that the slider’s height will never fall below a certain height.

Disable Force Full-Width:

Applicable for Full Screen sliders that should sit next to a web page’s sidebar.

Increase / Decrease Fullscreen Height:

Useful for Full Screen sliders that should make room for the page’s header or footer.  This is a jQuery selector which can be written as “#element-id”, “.element-class-name” or “tag-name” (“nav”, “header”, “footer”, etc.) .

And/or offset the slider’s height by a fixed percentage or pixel amount: