Here you can find the list of slider available options. Some options as demonstrated in the list, are defined by addons and may not be available in the page, therefore, you need to make sure the addon file is imported or bundled with the slider file. For more information about managing addons and building JS file check out this article.
Note: You can also add?masterslider-all.min.js?file in the page, it includes all addons as well.
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 Controlling Slider Height article. | – |
| breakpoints | Breakpoints object | This option defines breakpoints for the slider. For more information check Breakpoints article. | – |
| layout | ‘boxed’ | Specifies the type of the slider layout. Refer to Slider Layouts article for more information. | – |
| keepAspectRatio | true | Keeps the slider aspect ratio on resize. | – |
| narrowLayoutOn | ‘tablet’ | The break point name that slider layout switches to narrow size on it. For more information about responsiveness and layout check 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 larger that 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, only works if?autoHeight?is enabled. | autoHeight |
| smoothHeightDuration | 0.5 | The transition duration of changing slider height size 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 |
| fullscreenMargin | 0 | Specifies margin amount to the bottom of the slider in fullscreen layout. This options is useful if you need to fit the slider fullscreen size in page beside other contents like header menu. | – |
| autofillTarget | null | Specifies the target element that slider fills it. When this option is not set, slider fills its parent element. | – |
| partialView | false | Shows partial of the next and previous slides at both sides of the selected slide. | partialView |
| partialMinSpace | 30 | The minimum space amount at both sides of the slider in small screen sizes when partial view option is enabled. | partialView |
| sizingReference | ‘view’ | This option lets you set how slider find 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 works best with fullwidth or fullscreen layout. | – |
Navigation options
| Option name | Default value | Description | Related addon |
| view | ‘basic’ | The slide transition view. For more information check out Sliding transitions article. | – |
| speed | 17 | The slide transition speed. Valid value ranges is between between 0 and 100. | – |
| start | 1 | Specifies the start slide after slider initialization. | – |
| loop | false | Enables loop navigation between slides. It changes to the first slide after reaching the last one. | – |
| space | 0 | The space between slides in pixels. | – |
| dir | ‘h’ | Specifies slide changing direction. Possible values are?'h'?for horizontal direction and?'v'?for vertical direction. |
– |
| rtl | false | Enables RTL navigation in slider. | – |
| shuffle | false | Changes the order of slides randomly. | – |
| slickMode | ‘slide’ | The type of slick movement between slides. Values are?'slide',?'scroll'?and?'snapping' |
– |
| mouse | true | Enables the swipe navigation by mouse. | – |
| touch | true | Enables the swipe navigation by touch in touch devices. | – |
| grabCursor | ‘auto’ | Changes the mouse cursor to grab when it enters the slider. The?'auto'?value checks swipe options. |
grabCursor |
| snappingMinSpeed | 2 | Minimum required swipe speed to change the slide. | – |
| maxSlickSpeed | 300 | Maximum slick movement speed it prevents slider to scroll too fast. | – |
| instantSelect | true | Instantly selects the slider upon changing starts, it causes layers start animating before slide completely appears in view. | – |
| selectFactor | 0.5 | Specifies how much of the slide length should be entered to the view to be considered as a selected slide. The value is between?0?to?1. |
– |
| keyboard | false | Enables keyboard navigation,?'onhover'?value indicates the keyboard navigation only works when the mouse cursor enters the slider. |
keyboardNav |
| wheel | true | Enables wheel navigation on the slider. | – |
| wheelOnAppear | true | Enables the wheel navigation only if the slider completely appears in the browser window. | – |
| wheelPrevent | ‘auto’ | Specifies the type of preventing default wheel behavior in the browser,?'auto'?only prevents if there was more slides to come.?true?or?false?values always enables or disables the preventing wheel default behavior. |
– |
| wheelScrollSlick | 50 | The speed of slick scrolling movement to new a position by wheel,?0?disables the slick movement effect. This option only affective if?slickMode?option sets to?'scroll'. |
– |
| wheelSpeed | 2 | The wheel scrolling speed. | – |
| deepLink | null | A unique name of the slider in the page address, null value disables deeplink option. | deeplink |
| deepLinkType | ‘path’ | Specifies the type of hash value in page’s url. possible values ‘path’ (e.g.?#gallery/1) and ‘query’ (e.g.?#gallery=4) |
deeplink |
| startOnAppear | false | Prevents the slider to auto initialize if it is not visible in the browser, and it starts the slider upon it appears to the browser window. | startOnAppear |
| autoPlay | false | Enables the autoplay slideshow. | autoplay |
| slideshowDelay | 3 | Global value for the delay between changing slides. Used when slide duration is not set for slide(s). | autoplay |
| autoPlayAfterVideo | false | Slideshow timer will not get start until background video starts playing. | autoplay |
| pauseOnHover | false | Pauses slideshow timer when mouse cursor enters the slider area. | autoplay |
| resetTimerOnBlur | false | Resets slideshow timer after mouse leaves the slider. | autoplay |
| pauseAtEnd | ‘auto’ | Pauses the slider slideshow timer after reaching to the last slide. | autoplay |
Slide and layer options
| Option name | Default value | Description | Related addon |
| preload | 0 | Controls the preloading procedure in the slider.?0?value loads assets in sequence,?'all'?value loads all assets before initializing the slider. Other numeral values specify the number of nearby slides to start loading upon selecting a new slide. |
smartLoader |
| slideLoading | ‘auto’ | The type of loading symbol over the slides,?'auto'?searches for?'ms-slide-loading'?then?'ms-loading-container'?in the slider markup.?'off'?does not add any loading for slides. For more information check Creating Custom Loading article. |
loading |
| slideFit | null | Specifies the slides background fit mode globally. Possible value are?'cover',?'contain',?'fill',?'tile'?and?'none'. |
– |
| layerAnimations | ‘none’ | Changes the default layer animation behavior to the progressive mode if it sets to?'progressive'. For more information check out Progressive Animations article. |
progressiveLayerAnimation |
| layerAnimationProgressFactor | 0.5 | Specifies the length of the slide that should come in or leave the view to the progressive layers animations complete. Valid value range is between?0?and?1 |
progressiveLayerAnimation |
| instantChangeOverlays | ‘auto’ | Whether to change the overlay layers on the slide change start.?'auto'?value inherits the?instatntSelect?option. |
overlayLayers |
| parallaxMode | ‘mouse’ | Specifies the layer parallax mode. Possible values are?'mouse',?'mouse:x-only',?'mouse:y-only'?and?'swipe'. For more information check out Layer Parallax Effect article. |
parallaxLayers |
| scrollParallax | null | The object of scroll parallax effect options. For more information, check out Scroll Parallax Effect article. | scrollParallax |
| filters | null | The object of CSS filters that applies to the slides. For more information check out Adding CSS Filters article. | cssFilters |
| filterTarget | ‘slide’ | The target element in slide to applying CSS filters to it, possible values:?'slide'?and?'slide-background'?or any slide scoped CSS selector. For more information check out Adding CSS Filters article. |
cssFilters |
| inView | 10 | Specifies the number of slides visible in the view rendering layer, and lower numbers causes lower GPU memory usage. This option is useful to control memory issue in mobile devices. | inView |
Other options
| Option name | Default value | Description | Related addon |
| delayBeforeResize | 0 | Adds delay before resizing the slider. | – |
| mobileInlineVideo | true | Enables the possibility of showing background videos and video layers in mobile devices too. | – |
| slideStatusClasses | true | Adds helper class names to the slide element. | – |
| updateZIndex | true | Adds z-index to slides and update the values upon selected slide changes. | – |
| arrangeOnUpdate | false | Rearranges slides every time transition view updates, this option only effective when the loop navigation is enabled. | – |
| disableAddons | null | The list of addon names to exclude in initialization. | – |