Interface RoyalSliderOptions

Index

Properties

Properties

optional public addActiveClass?: boolean

Adds rsActiveSlide class to current slide before transition. (default: false)

optional public allowCSS3?: boolean

Allows usage of CSS3 transitions. Might be useful if you're experiencing font-rendering problems, or other CSS3-related bugs. (default: true)

optional public arrowsNav?: boolean

Direction arrows navigation. (default: true)

optional public arrowsNavAutoHide?: boolean

Auto hide arrows. (default: true)

optional public arrowsNavHideOnTouch?: boolean

Hides arrows completely on touch devices. (default: false)

optional public autoHeight?: boolean

Scales and animates height based on current slide. Please note: if you have images in slide that don't have rsImg class) or don't have fixed size, use $(window).load() instead of $(document).ready() before initializing slider. Also, autoHeight doesn't work with properties like autoScaleSlider, imageScaleMode and imageAlignCenter. (default: false)

optional public autoScaleSlider?: boolean

Automatically updates slider height based on base width. (default: false)

optional public autoScaleSliderHeight?: number

400 Base slider height

optional public autoScaleSliderWidth?: number

Base slider width.Slider will autocalculate the ratio based on these values. (default: 800)

optional public autoplay?: RoyalSliderAutoplayOptions

Autoplay slideshow can be enabled via slider options. Delay between items can be set globally via delay option, or specifically for each item by adding data-rsDelay="1000" to root element of the slide (1000 = 1sec).

optional public block?: RoyalSliderBlockOptions

All elements inside slide that have class rsABlock will be treated by slider as animated blocks (tag name doesn't matter). Blocks can not be nested, but you can put multiple instances of them into one slide, or make slide itself animated block.

optional public controlNavigation?: string

Navigation type, can be 'bullets', 'thumbnails', 'tabs' or 'none' (default: 'bullets')

optional public controlsInside?: boolean

If set to true adds arrows and fullscreen button inside rsOverflow container, otherwise inside root slider container. (default: true)

optional public deeplinking?: RoyalSliderDeeplinkingOptions

Deep linking module makes URL automatically change when you switch slides and you can easily link to specific slide (aka permalink).

optional public easeInOut?: string

Easing function for simple transition.Read more in the easing section of the documentation. (default: 'easeInOutSine')

optional public easeOut?: string

Easing function of animation after ending of the swipe gesture. Read more in the easing section of the documentation. (default: 'easeOutSine')

optional public fadeinLoadedSlide?: boolean

Fades in slide after it's loaded. (default: true)

optional public fullscreen?: RoyalSliderFullscreenOptions

You may specify larger images when slider is in fullscreen mode by adding data-rsBigImg attribute to rsImg element. A few examples:

optional public globalCaption?: boolean

Adds global caption element to slider, read more in the global caption section of documentation. (default: false)

optional public imageAlignCenter?: boolean

Aligns image to center of slide. (default: true)

optional public imageScaleMode?: string

Scale mode for images."fill", "fit", "fit-if-smaller" or "none". (default: 'fit-if-smaller')

optional public imageScalePadding?: number

Distance between image and edge of slide (doesn't work with 'fill' scale mode). (default: 4)

optional public imgHeight?: number

Adds base height to all images for better-looking loading. Can be specified separately for each image. (default: null)

optional public imgWidth?: number

Adds base width to all images for better-looking loading. Can be specified separately for each image. (default: null)

optional public keyboardNavEnabled?: boolean

Navigate slider with keyboard left and right arrows. (default: false)

optional public loop?: boolean

Makes slider to go from last slide to first. (default: false)

optional public loopRewind?: boolean

Makes slider to go from last slide to first with rewind. Overrides prev option. (default: false)

optional public minSlideOffset?: number

Minimum distance in pixels to show next slide while dragging. (default: 10)

optional public navigateByClick?: boolean

Navigates forward by clicking on slide. (default: true)

optional public numImagesToPreload?: number

Number of slides to preload on sides.If you set it to 0, only one slide will be kept in the display list at once. (default: 4)

optional public randomizeSlides?: boolean

Randomizes all slides at start. (default: false)

optional public sliderDrag?: boolean

Mouse drag navigation over slider. (default: true)

optional public sliderTouch?: boolean

Touch navigation of slider. (default: true)

optional public slides?: Element

Overrides HTML of slides, used for creating of slides from HTML that is not attached to DOM. More info in knowledge base. (default: null)

optional public slidesOrientation?: string

Can be 'vertical' or 'horizontal'. (default: 'horizontal')

optional public slidesSpacing?: number

Spacing between slides in pixels. (default: 8)

optional public startSlideId?: number

Start slide index. (default: 0)

optional public thumbs?: RoyalSliderThumbsOptions

Thumbnail options

optional public transitionSpeed?: number

Slider transition speed, in ms. (default: 600)

optional public transitionType?: string

'move' or 'fade'. Important note about fade transition, slides must have background as only one image is animating. (default: 'move')

optional public usePreloader?: boolean

Enables spinning preloader, you may style it via CSS (class rsPreloader). (default: true)

optional public video?: RoyalSliderVideoOptions

To add video to slide, you need to add data-rsVideo="" attribute to image. It can contain link to YouTube or Vimeo video.

optional public visibleNearby?: RoyalSliderVisibleOptions

Module "reveals" next and previous slides, like in this template.