Documentation

Height Options #

autoHeight
learn more
autoHeight: true
This determines whether the height of the slider automatically adjusts based on the content. If false, the slider will assume the height of the largest panel.
minHeight
learn more
minHeight: 0
If you need to, you can set a minimum height. This is usually good when your content it loading after the slider is built. However, you probably wont need to use this.
heightEaseDuration
learn more
heightEaseDuration: 1500
This is the speed at which the height will adjust. The higher the number, the slower.
heightEaseFunction
learn more
heightEaseFunction: "easeInOutExpo"
This is the animation used to transition from one slide to the next. You can see some of those functions here: jQuery Easing Examples.

easeOutCubic, easeInOutCubic, easeInCirc, easeOutCirc, easeInOutCirc, easeInExpo, easeOutExpo, easeInOutExpo, easeInQuad, easeOutQuad, easeInOutQuad, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInBack, easeOutBack, easeInOutBack

Sliding Options #

slideEaseDuration
learn more
slideEaseDuration: 1500
This is the speed at which the slide will adjust. The higher the number, the slower.
slideEaseFunction
learn more
slideEaseFunction: "easeInOutExpo"
This is the animation used to transition from one slide to the next. You may use "fade" or one of the easing functions below. You can see some of those functions here: jQuery Easing Examples. Additionally, Liquid Slider supports CSS animate.css, or other custom animations too (see below).

easeOutCubic, easeInOutCubic, easeInCirc, easeOutCirc, easeInOutCirc, easeInExpo, easeOutExpo, easeInOutExpo, easeInQuad, easeOutQuad, easeInOutQuad, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInBack, easeOutBack, easeInOutBack

animateIn
learn more
animateIn: "bounceInRight"
Use the popular animate.css to control transitions. See here for a demo plus options.
animateOut
learn more
animateOut: "bounceOutRight"
Use the popular animate.css to control transitions. See here for a demo plus options.
continuous
learn more
continuous: true
This allows for continuous sliding, which gives the slider a sort-of never ending effect. This is currently disabled for mobile devices as it's a little too buggy.
fadeInDuration
learn more
fadeInDuration: 500
If you are using "fade" for the slide easing, this will be the speed at which the slides fade in.
fadeOutDuration
learn more
fadeOutDuration: 500
If you are using "fade" for the slide easing, this will be the speed at which the slides fade out.

Auto Slide #

autoSlide
learn more
autoSlide: false
If you want the slider to automitically slide, set this to true.
autoSlideDirection
learn more
autoSlideDirection: right
The slider will autoslide to the right, but you can set it to "left" if you want..
autoSlideInterval
learn more
autoSlideInterval: 6000
You can change this if you want the slider to transition more frequently. The lower the number, the more frequently it will change.
forceAutoSlide
learn more
forceAutoSlide: false
This will force the slider to continue sliding.
pauseOnHover
learn more
pauseOnHover: true
This pauses the slider when someone hovers over it. Note that it doesn't work on crosslinks.

Dynamic Arrows #

dynamicArrows
learn more
dynamicArrows: true
This builds two arrows around the slider, allowing users to control it as they would expect.
dynamicArrowsGraphical
learn more
dynamicArrowsGraphical: true
This uses graphical arrows instead of text-based.
dynamicArrowLeftText
learn more
dynamicArrowLeftText: "« left"
This sets the left text arrow when not using graphical arrows.
dynamicArrowRightText
learn more
dynamicArrowRightText: "right »"
This sets the right text arrow when not using graphical arrows.
hideSideArrows
learn more
hideSideArrows: false
You can set this to true and when on the first or last slide the first or last arrow will fade out. You should also set continuous to false unless you are using autoslide.
hideSideArrowsDuration
learn more
hideSideArrowsDuration: 750
You can adjust the speed at which the arrows fade out.
hoverArrows
learn more
hoverArrows: true
The arrows only show when someone hovers over the slider. If you want them to always show, set this to false.
hoverArrowDuration
learn more
hoverArrowDuration: 250
You can adjust the speed at which the arrows fade out.

Dynamic Tabs #

dynamicTabs
learn more
dynamicTabs: true
The slider will automatically create tabs if this is true.
dynamicTabsHtml
learn more
dynamicTabsHtml: true
This let's you apply htmlin the navigation. Useful if you want to use images instead of titles
includeTitle
learn more
includeTitle: true
Optionally, you can choose not to include the title. This avoids having duplicate content in the panel and the tab, such as images.
dynamicTabsAlign
learn more
dynamicTabsAlign: "left"
You can set this to left, center, or right.
dynamicTabsPosition
learn more
dynamicTabsPosition: "top"
You can set this to top or bottom.
panelTitleSelector
learn more
panelTitleSelector :".title"
If you want to change the navigation text that is displayed dynamically, you can change this selector. Additionally, if you want to hide this, you can use css and set the display to none. For example:
navElementTag
learn more
navElementTag: "div"
This gives you the option to use a <nav> or any other tag in place of the current <div>

Keyboard Controls #

keyboardNavigation
learn more
keyboardNavigation: false
You can use keyboard controls if you want. You just need to map out the keys accordingly.
leftKey
learn more
leftKey: 39
You can set the key to direct the slider to the left.
rightKey
learn more
rightKey: 37
You can set the key to direct the slider to the right.
panelKeys
learn more
panelKeys: {1:49,2:50,3:51,4:52}
This defines the first 4 panels as numbers 1-4 on the keyboard (but not the number pad).

External Controls #

crossLinks
learn more
If you want to control the slider from anywhere on the page, you can use the API to access the slider's controls. First, store the API object to a variable:
var api = $.data( $('#main-slider')[0], 'liquidSlider');
Then in your html,
<a href="#2" onclick="api.setNextPanel(1);api.updateClass($(this))">Slide 2</a>
You may also use any jQuery element as a paramerter, such as api.updateClass($('.multiple'))
hashLinking
learn more
hashLinking: false
If you want to control the slider from an external page you must enable hash links.
<a href="http://example.com/#slide-3">Slide 3</a>
firstPanelToLoad
learn more
firstPanelToLoad: 1
You can set this to load a different slide other than the first.
hashTitleSelector
learn more
hashTitleSelector: ".title"
This is the selector you can use for hash linking.

Preloader Options #

preloader
learn more
preloader: false
You can add a preloader if you want, which will add feedback to your users when you have a lot of images or other elements that load slowly.

Responsive Settings #

responsive
learn more
responsive: true
This is what separates the Liquid Slider from most other sliders available. Only disable this if you do not want to use a responsive design. This will make the slider similar to the Coda Slider
mobileNavigation
learn more
mobileNavigation: true
The slider automatically adds a mobile navigation menu to the slider. If you don't want it, set this to false.
mobileNavDefaultText
learn more
mobileNavDefaultText: "Menu"
The text defaults to "Menu" but you can change it here to whatever you want.
mobileUIThreshold
learn more
mobileUIThreshold: 0
The menu will change over once the length of the standard menu exceeds the length of the slider. Adjust this setting to manipulate that.
hideArrowsWhenMobile
learn more
hideArrowsWhenMobile: true
By default, the slider will hide the arrows when on mobile devices in order to make room.
hideArrowsThreshold
learn more
hideArrowsThreshold: 481
You can set a specific width to when the arrows disappear.
useCSSMaxWidth
learn more
useCSSMaxWidth: 2200
This is the maximum width that the slider will use CSS transitions. This is here in case you prefer the jQuery animations for some reason. Note that the slider will fall back when CSS transitions are not supported.
swipe
learn more
swipe: true
This allows the user to swipe from panel to panel. If you use this, you must also include the TouchSwipe jQuery plugin.