Page tree
Skip to end of metadata
Go to start of metadata

You can use/change following options in the slider setup method. For example:

    var slider = new MasterSlider();
    slider.setup('masterslider' , {
            width:800,    // slider standard width
            height:350,   // slider standard height
            // more slider options goes here...
    // adds Arrows navigation control to the slider.
Option NameDefault ValueDescription
width300The base width of slides. It helps the slider to resize in correct ratio.
height150The base height of slides, It helps the slider to resize in correct ratio.
start1The slider starting slide number.
space0The spacing value between slides in pixels.
grabCursortrueWhether the slider uses grab mouse cursor.
swipetrueWhether the drag/swipe navigation is enabled.
mousetrueWhether the user can use mouse drag navigation.
wheelfalseEnables mouse scroll wheel navigation.
keyboardfalseEnables keyboard navigation.
autoplayfalseEnables the autoplay slideshow.
loopfalseEnables the continuous sliding mode.
shufflefalseEnables shuffle ordering.
preload0Specifies the number of slides loaded by slider. 0 value means slider will load slides in a sequence and "all" value means slider will load all of the slides at start. This option is only effective for images which has "data-src" attribute.
layout"boxed"Since v1.5.7 
Specifies layout of the slider, it accepts the following values:
  • boxed: The default layout of slider, size of the slider does not exceed the specified width and height in slider options.
  • fullwidth: Forces the slider to adapt width to the browser width.
  • fullscreen: Forces the slider to adapt width and height to the browser window dimension.
  • fillwidth: Enables the slider to adapt width to its parent element.
  • autofill: Enables the slider to adapt width and height to its parent element.
  • partialview: It's like the boxed layout but nearby slides are always visible.
fullscreenMargin0Specifies margin space at the bottom of slider, it only affects the "full-screen" layout.
heightLimitfalseIt forces the slide to use max height value as its base specified height value.
autoHeightfalseWhether the slider adapts its height to each slide height or not. It overrides the "heightLimit" option.
smoothHeighttrueWhether the slider uses smooth animation while its height changes
endPausefalseWhether the slider pauses the slideshow when it reaches to the last slide.
overPausefalseWhether the slider pauses the slideshow on hover.
fillMode"fill"Specifies the slide background scaling method. Its acceptable values are "fill", "fit", "stretch", "center" and "tile".
centerControlstrueWhether the slider aligns UI controls to center. This option is only effective in full width mode.
layersMode"center"It accepts two values "center" and "full". The "center" value indicates that the slider aligns layers to the center. This option is only effective in full width mode.
instantStartLayersfalseIf TRUE , starts showing the layers while the transition is still in progress. ( while moving/changing )
If FALSE, starts showing the layers after the transition is complete. ( when stopped/changed )

Since v1.7.0 
Specifies type of layers parallax move, it accepts the values below :

  • "mouse": It moves the layers while mouse is moving
  • "swipe": It moves layers while slider is sliding or swiping.
  • "mouse:x-only": It moves the layers only on X-axis while mouse is moving (horizontally moves).
  • "mouse:y-only": It moves the layers only on Y-axis while mouse is moving (vertically moves).
 filters nullApplies CSS3 filters to slide transition views. For more information check Adding CSS3 filters.
 hideLayers false Whether the slider hides all layers before changing slide.
speed17Specifies slide changing speed. It accepts float values between 0 and 100.
dir"h"Specifies slide changing direction. It accepts two values "h" (horizontal) and "v" (vertical).
view"basic"The slide changing transition. More information here.
deepLinknullA unique name for the slider which will be used in the browser's address bar. You can enter your desired name. Otherwise the slider generates a unique one.
deepLinkType"path"Specifies the type of deep-linking permalink in the address bar. acceptable values: "path" and "query"
startOnAppearfalseIt initializes the slider as soon as the slider appears inside the browser window , while scrolling.
(Starts the slider , as soon as you scroll to the slider )

Since V2.50.0

Whether show the background video in mobile devices (Enabling this option is not recommended, since, it can interrupt slider functionality in mobile devices.