Slider Settings Overview

sliderTypeType:String
Value:standard, carousel, hero
Default:‘standard’

Defines the Type of the Slider which can be:

• standard – Regular Slider with unlimited amount of slides, 1 Slide is focused and visible in the same time
• carousel – A horizontal carousel where unlimited amount of slides can be defined.  1 Slide is focused, more slide visible in the same time.
• hero – Typical Hero Block usage with animated layers, where only 1 Slide is defined and visible.

See Also at SliderTypes

sliderLayoutType:String
Value:auto, fullwidth, fullscreen
Default:‘auto’

Defines the Layout of the Slider which can be:

• auto – slider will always fill the wrapping container horizontal, following any horizontal sizes. Height of slider will be calculated based on the Grid Sizes and current browser size. Max. height of Slider will be equal to the current gridheight. (Except autoHeight or minHeight is set)
• fullwidth – slider will always fill the full width of the browser, independent of the wrapping containers width. Height of slider will be calculated based on the Grid Sizes and current browser size. Max. height of Slider will be equal to the current gridheight. (Except autoHeight or minHeight is set)
• fullscreen – slider width and height will follow the exact width and height of the Browser size. Negative offsets can be defined via fullscreenOffsetContainer and fullscreenOffset options.

See also at Slider Layouts.

responsiveLevelsType:Integer / Array of Integer
Value:px
Default:4096

Breakpoint(s) for Display Types. If only 1 Value is defined, breakpoint will be ignored, and all elements will linear resize within the slides.

To get 4 different Layouts for the 4 Display Types (Desktop, notebook, table and mobile) define this value as an Array  i.e. [2048,1024,778,480].

Every time Browser Size shrinks, the next best Layout type will picked and the Layer Grid and all Multi Level defined Elements will be redrawn with the next best layout. This allows you to create  a perfect Layout for the different Display types.

gridwidthType:Integer / Array of Integer
Value:px
Default:1200

This value(s) define the Layer Grids Width. Layer Grid is the parent container of all layers within a Slide. This will not define the max width of the Slider, but the max width of the Layers container which is always horizontal centered within the slider.

Value can be:

• a single Number for 1 level Responsive behavior or
• an array of numbers (4 Value in an array i.e. [1200,860,760,460]). for a 4 level Responsive behavior  where the 4  Sizes defines the 4 different Display size for Desktop, Notebook, Tablets and Mobiles.

If the value is defined as an Array, the Layer Grid size will pick the size from the Array based on the the Current Browser Width and the suitable value from the responsiveLevels.

Read more about here.

gridheightType:Integer / Array of Integer
Value:px
Default:700

This value(s) define the Layer Grids Height. Layer Grid is the parent container of all layers within a Slide. This will define the max height of the Slider also, if options like minHeight or autoHeight not set, and sliderLayout is not set to fullscreen.

Value can be:

• a single Number for 1 level Responsive behavior or
• an array of numbers (4 Value in an array i.e. [650,500,450,350]). for a 4 level Responsive behavior  where the 4  Sizes defines the 4 different Display size for Desktop, Notebook, Tablets and Mobiles.

If the value is defined as an Array, the Layer Grid size will pick the height from the Array based on the the Current Browser Width and the suitable value from the responsiveLevels.

Read more about here.

autoHeightType:String
Value:on,off
Default:‘off’

If value set to “on”, Slider height will respect the gridwidth/gridheight defined Aspect Ratio, and will always set the Slider Sizes to keep the same aspect ratio at any browsersize. Layer Grid will be always vertically and horizontally centered.

Read more about here.

minHeightType:Integer
Value:px
Default:0

Defines the minimum height of the Slider (global). If Layer Grid shrinks under this value, the Slider will keep this height and will center the Layer Grid vertically within the Slider.

Read more about here.

fullScreenAlignForce
Type:String
Value:class,id
Default:‘off’

Deprecated Allows to align layers relative to the Slider instead of relative to the Layers Grid. This option will be removed from 5.2.
Instead of using global options for Align forces, please use the Layer based settings like data-basealign=”slide” per Layer.

fullScreenOffsetContainerType:String
Value:class,id
Default:”

The Fullscreen Slider’s height will be reduced with the height of the containers which is defined in list form due this parameter. i.e. ‘.header, #logo, .menu.top’  The heights are calculated on demand, and in case they are dynamically changed, some revapi method revredraw() should be called to refresh the calculation of the Slider height.

fullScreenOffsetType:String
Value:px,%
Default:‘0’

The Fullscreen Slider’s height will be reduced/increased with the the value defined via this parameter.  Value can be px or % . i.e. “20%” will reduce the height of the fullscreen slider with the current browser height * 0.2;

delayType:Integer
Value:ms
Default:9000

Value is in milliseconds. Describes the default (global) length of the slides in ms.  Slides length can be individually set via the data-delay attributes. In case the slide has no individual length, it will pick this value.

waitForInit:Boolean
Value:true,false
Default:false

Will stop the load process of the Slider till the revapi.revstart() Method has been triggered.

disableProgressBarType:String
Value:on,off
Default:‘off’

If value set to ‘off’ the Progressbar will be shown. To hide the Progress Bar set this option to ‘on’.

startDelayType:Integer
Value:ms
Default:0

Wait with starting the first animation after the slider has been loaded. 1000 will wait 1sec before the slider starts. Useful option for manipulate the DOM before the slider starts.

stopAfterLoopsType:Integer
Value:-1 – 99
Default:-1

Auto Play stop after the Slider has been looped  “x” time, which is defined via this parameter. -1 will ignore the option. First Loop is 0. To Stop the Slider in the First Loop at Slide 3 use stopAfterLoops:0, stopAtSlide:2

stopAtSlideType:Integer
Value:-1 – Max. Slide Amount
Default:-1

Auto Play stop at Slide Nr. “x” which is defined via this parameter. -1 will ignore this parameter. First Index of Slide is 0. To Stop the Slider in the First Loop at Slide 3 use stopAfterLoops:0, stopAtSlide:2

if enable set to false, the slider starts to play after it has been loaded and initialised. Independent  if the slider is within the Visible Area of the Document or not.  To stop this behavior, you can set the enable parameter to true  and choose between two handlings via the outof parameter:

Wait will only first time trigger the Slider. In case the Slider is not visible during / after the Document loaded, the slider will wait till the Slider becomes in Visible Position.  Once the Slider is triggered to play, it will not stop again, even if the slider is not in the viewport.

Pause similar to the wait behavior, however the slider will stop every time the Slider is out of the visible area.

To define how many percent  of the Slider must be visible before it starts, you can use the visible_area parameter. 100% means, the full slider must be in the visible area before it starts, and 20% will start the slider already after 20% of the slider becomes visible.

lazyTypeType:String
Value:‘full’,’smart’,’single’,’none’
Default:‘smart’

The art to load the images within the slides and navigation containers. You can choose between the following parameters:

• all – Load all image element in a sequence at the initialisation. This will boost up the loading of your page, and will preload all images to have a smooth and breakless run already in the first loop.
• smart – It will load the page as quick as possible, and load only the current and neighbour slide elements. If slide is called which not loaded yet, will be loaded on demand with minimal delays
• single – It will load only the the start slide. Any other slides will be loaded on demand.

dottedOverlayType:String
Value:twoxtwo, threexthree, twoxtwowhite, threexthreewhite
Default:‘none’

A Default overlay on slides. It will create a dotted transparent overlay under the layers, over the slides. We recommend to ignore this feature, and create fullscreen layers with background images instead of this to be able to self drive the z-index and position of overlays.

shadowType:Integer
Value:0,1,2,3,4,5,6
Default:0

Shadow type which will be drawn via jQuery and css on demand. We strongly recommend to set a colored background for the class rev_slider_wrapper to get a clean and smooth shadow effect below/behind your slider.

spinnerType:String
Value:spinner0, spinner1, spinner2…
Default:spinner0

Loader (“spinner”) Type. You can choose between “off”, “spinner0”, “spinner1″,”spinner2”, “spinner3”, “spinner4”, “spinner5”.

hideAllCaptionAtLimit
Type:Integer
Value:px
Default:0

Deprecated Defines a Global parameter to hide all layers if the browser width is smaller than this parameter value.

We recommend to use instead of the option the data-visibility=”[‘on’,’on’,’off’,’off’]” if responsiveLevels defined via Array. This way you can set for any Layer on which Display type should be visible.

hideCaptionAtLimit
Type:Integer
Value:px
Default:0

Deprecated Defines a Global parameter to hide certain layers if the browser width is smaller than this parameter value. Layers with the data-captionhidden=”on” attribute will act on this setting.

We recommend to use instead of the option the data-visibility=”[‘on’,’on’,’off’,’off’]” if responsiveLevels defined via Array. This way you can set for any Layer on which Display type should be visible.

hideSliderAtLimit
Type:Integer
Value:px
Default:0

Deprecated Defines a Global parameter to hide the Slider if the browser width is smaller than this parameter value. Slider will stop and will be hidden until the screen width gets bigger then the parameter value.

debugMode
Type:Boolean
Value:false,true
Default:false

Turns on the Frontend Debug mode, which allows you to see the Layer Grid and on hover the Layer parameters.  This is a new feature which will be extended with many useful options in later versions.

extensions
Type:String
Value:‘extensions/’
Default:‘extensions/’

Slider Revolution is a module based jQuery plugin. It loads only the core first, and any other extensions will be loaded due the core from the extension library on demand.

As default the libraries are in the revolution/js/extensions folder minimised and in the revolution/js/extensions/source folder in row format.  Slider Revolution will look for this libraries relative to the Plugin Core (jquery.themepunch.revolution.min.js) library which is in the revolution/js folder.

Dont forget to set the extensions_suffix as well based on if you want to load minimized or row formats !

Note ! On Local filesystems, without Local servers you will need to load the Libraries manually due the <script> tags.  On local filesystems the Ajax Load process will break due Cross Domain Policy issues.

extensions_suffix
Type:String
Value:‘.min.js/’
Default:‘.min.js’

Slider Revolution is a module based jQuery plugin. It loads only the core first, and any other extensions will be loaded due the Core on demand.

As default the libraries are in the revolution/js/extensions folder minimised and in the revolution/js/extensions/source folder in row format.  Slider Revolution will look for this libraries relative to the Plugin Core (jquery.themepunch.revolution.min.js) library which is in the revolution/js folder.

With this parameter you can set up if you wish to load the extensions in row format or in minimised format.

Dont forget to set the extensions as well based on if you want to load minimized or row formats !

Note ! On Local filesystems, without Local servers you will need to load the Libraries manually due the <script> tags.  On local filesystems the Ajax Load process will break due Cross Domain Policy issues.

panZoomDisableOnMobile set to on will disable the Pan Zoom effects on Mobile devices.

simplifyAll is Deprecated and will only work limited. Basically it will turn complex animations on old IE versions and old iOS to fade effects. Furthermore it use the GreenSock lagSmoothing option to avoid frame dropping on slower devices.

nextSlidenWindowFocus allow to swap a slide on focusing the Browser Tab after once it was blurred.  It can be useful in case some time outs break due complex layer animations in the slide.  (Can have a very odd negative Effect on Firefox, where resize event also trigger Focus events)

disableFocusListener will disable any Focus/Blur events on Browsers and Browser Tabs.  Disabling this feature will ignore the Process to stop Ken Burns effect and Slider Timer by leaving the Browser Tab.

type defines the Event type of the Parallax sensibility.

• off – No Parallax Effect enabled Globally
• mouse – elements will follow the mouse pointer movements over the sliders
• scroll – elements will follow the scroll positions
• scroll+mouse – elements will vertical follow the scroll positions, and horizontal follow the mouse positions

levels defines an array of distances. This is a reference Table, so you dont need to set up layer to layer the distance strengths.  This way you can globally change the parallax effect strengths.  Let say Layer “a” has the parallax level 5.  In our example it becomes a parallax strength of “25”.   Means the maximum distance of effect will be 25px in one direction.  All Layers and Slide Backgrounds can have different Parallax Level references to build a nice multi dimensional effect.

origo defines the calculation base of the parallax direction and distances.

• slidercenter – distance between mouse and slider center will be calculated. The outter side of slider is -100% / 100% and the center is 0%.  Elements will be transformed like “distance percent” * “responsive strength of element” in vertical and horizontal direction
• enterpoint – distance between mouse enter point and current mouse point will be calculated.   Elements will be transformed like “distance percent” * “responsive strength of element” in vertical and horizontal direction

speed – the speed of the position transform of element. 400 will move the elements in 0.4s.

bgparallax – allows to general disable/enable Background Parallax effects.  Still, you will need to set the Parallax Effect per Slide Background

disable_onmobile – disable Parallax Effect on mobiles for better Performance and smoother effects.