Dưới đây là danh sách các options của RubySlider.

General options

TênGiá trị mặc địnhDanh sách giá trịMô tả
  • line
  • rectMove, rectRun, rectSlice
    rubyFade, rubyMove, rubyRun, rubySlice
  • cssOne
  • coverflow3D
Thiết lập tên loại hiệu ứng cho RubySlider.
RubySlider có tổng cộng 4 loại hiệu ứng chính, đặc biệt hiệu ứng CSS có nhiều hiệu ứng nhỏ khác nhau, tạo ra hàng trăm hiệu ứng đẹp mắt và ấn tượng.
cssOneroDeal--Thiết lập tên hiệu ứng của loại hiệu ứng CssOne. Danh sách đầy đủ tên các hiệu ứng có thể xem ở trang này.
cssTwoOutslideShortDownOut--Setup name for Out effect of CSS Two effects
cssTwoInpushSoftIn--Setup name for In effect of CSS Two effects
cssFourPrevOutroEdgeRightOut--Setup name for CSS Four effect when swap to previous slide out
cssFourPrevInroEdgeLeftIn--Setup name for CSS Four effect when swap to previous slide in
cssFourNextOutroEdgeLeftOut--Setup name for CSS Four effect when swap to next slide out
cssFourNextInroEdgeRightIn--Setup name for CSS Four effect when swap to next slide in
fxEasingeaseOutCubic--Easing of main effect.
cssEasingnull--Easing of effect in CSS One, Two, Four effects.
speed400--Duration of the effect. Unit millisecond.
margin30--Distance between slides. Unit is px and supports distances left and right. Example:
  • "margin": [10, 20] → 10px is left distance, 20px is right distance
  • "margin": 30 → 30px is left and right distance
idBegin0--Set the slide will appear as rubytabs initialization, ID of slides started with 0. List of value option:
  • "begin": begin position, equivalent to idBegin = 0
  • "center": center position. If the total number of slides is an even number, then the position will be located near the left side. Example: Num of slide is 6, value of idBegin is 2
  • "centerRight": similar "center" value, but located near the right side. Example: Num of slide is 6, value of idBegin is 3
  • "end": end position
  • 0 1 2 ...: specific value of the ID slide
showByall--Set rubytabs initialized only on the specified device. List of value: "desktop", "mobile" and "all".
showFrom0--Set rubytabs will appear in range width of the site. Range-width have 2 values "min-width" and "max-width"(optional).
isAutoInittrue--Option exclusively for HTML5 data. RubyTabs is automatically initialized after markup have loaded.
isSlideshowfalse--Turn on/off slideshow.
isNavfalse--Turn on/off navigation tabs.
isPagtrue--Turn on/off pagination(tablist) tabs.
isSwipetrue--Turn on/off swipe gestures on rubytabs.
isKeyboardfalse--Turn on/off keyboard navigation, left/right arrow on keyboard to go prev/next slide.
isDeeplinkingfalse--Turn on/off deep-linkinging features.
isCookiefalse--Turn on/off cookie features.
namenull--The proper name for each rubytabs in the site. Used to link components markup outside with main markup of rubytabs.
nameViewportviewport--Set the name-class of the component "viewport".
nameCanvascanvas--Set the name-class of the component "canvas".
nameSlideslide--Set the name-class of the components "slides".
nameDataLazysrc--Name to be replaced in "data-src" on <img> tag using image lazyload function.

Options in load object

VariableDefault valueDescription
preload1The number of slides(tabs) preloaded before the rubytabs appears.
amountEachLoad2The number next slides will load after rubytabs appears, the slides will load in parallel.
isLazytrueTurn on/off only download the ImageLazy of selected slide.

Options in pag object

VariableDefault valueDescription
type"tabs"Type of pagination(tablist). List of value : "thumbnail", "tabs", "bullet", "list".
widthnullSetup fixed width for pagItem. By default, the pagItem will get largest width in the pagItems.
heightnullSetup fixed height for pagItem. By default, the pagItem will get largest height in the pagItems.
direction"hor"Setup the direction of pagination. List of value: "hor", "ver".
position"begin"Setup the position of pagination compared to the content tabs. List of value: "begin", "end".
align"begin"Align of pagItems compared to pagination. List of value: "begin", "center", "end", "justify".
speed300Time to transition of pagItem current automatically move to the center position.
ease"easeOutCubic"Easing transition of pagItem current automatically move to the center position.
sizeAuto"full"Setup width(horizontal direction) / height(vertical direction) of pagination compared to width/height of rubytabs.
  • "null": size of pagination depends on css.
  • "self": size pagination is equal to size all pagItems combined.
  • "full": size pagination is equal to size content of rubytabs.
typeSizeItem"self"Get the size of each pagItem compared to the size of other pagItems. List of value: "self", "min", "max".
moreClassnullAdding classes to the pagination markup.
widthMinToHor0Minimum width of RubyTabs to switch to horizontal direction.
rangeMinToHor0Minimum width of browser-document to switch to horizontal direction.
isItemCurCenterWhenTaptrueTurn on/off the current pagItem automatically moves into the center position of pagination.
isArrowtrueTurn on/off navigation next/previous of pagItem.
isTapOnArrowtrueAdd tap event on navigation next/previous
isMarkfalseTurn on/off mark of pagItem current. Supported animation.
sizeMarkTo"border"The size of mark depends on the size (can include "padding", "margin"..) pagItem current. List of value: "self", "padding", "border", "margin".

Options in swipe object

VariableDefault valueDescription
isBodyfalseTurn on/off swipe gestures in body content of tabs.
isAutoOnPagtrueTurn on/off auto swipe gestures on pagination when the total size of pagItems larger size pagination.


  • Distinguish value-type by color :
    number - string - boolean - mixed value
  • Options have is prefix → boolean value.
  • HTML5 data - Easy setup options by Javascript Object Literal Notation as other plugins jQuery, same time support setup options by HTML5 data attributes.

    The structure options in HTML5 data similar as Javascript.

    <div class="rt01" data-tabs='{
    "fx"    : "line",
    "speed"   : 400,
    "slideshow" : {
    "delay" : 5000,
    "timer" : "line"
    }'> ... </div>
    // Setup options in javascript
    "fx"    : "line",
    "speed"   : 400,
    "slideshow" : {
    "delay" : 5000,
    "timer" : "line"
  • Options on each slide - is setup directly on each slide by "data-slide" (HTML5 data attributes)

    RubyTabs will priority get the option on each slide compared with same name the general options.

    <div class="rs01" data-slider='{
        "speed": 400,
        "slideshow": {
          "delay": 5000
    <!-- Slide custom setup -->
    <div data-slide='{ "speed": 600, "slideshow": { "delay": 8000 } }'> ... </div>