DANH SÁCH OPTIONS

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

General options
Tên	Giá trị mặc định	Danh sách giá trị	Mô tả
fx	`line`	`line` `rectMove`, `rectRun`, `rectSlice` `rubyFade`, `rubyMove`, `rubyRun`, `rubySlice` `randomMath` `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.
cssOne	`roDeal`	--	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.
cssTwoOut	`slideShortDownOut`	--	Setup name for Out effect of CSS Two effects
cssTwoIn	`pushSoftIn`	--	Setup name for In effect of CSS Two effects
cssFourPrevOut	`roEdgeRightOut`	--	Setup name for CSS Four effect when swap to previous slide out
cssFourPrevIn	`roEdgeLeftIn`	--	Setup name for CSS Four effect when swap to previous slide in
cssFourNextOut	`roEdgeLeftOut`	--	Setup name for CSS Four effect when swap to next slide out
cssFourNextIn	`roEdgeRightIn`	--	Setup name for CSS Four effect when swap to next slide in
fxEasing	`easeOutCubic`	--	Easing of main effect.
cssEasing	`null`	--	Easing of effect in CSS One, Two, Four effects.
speed	`400`	--	Duration of the effect. Unit millisecond.
margin	`30`	--	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
idBegin	`0`	--	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
showBy	`all`	--	Set rubytabs initialized only on the specified device. List of value: "desktop", "mobile" and "all".
showFrom	0	--	Set rubytabs will appear in range width of the site. Range-width have 2 values "min-width" and "max-width"(optional).

isAutoInit	`true`	--	Option exclusively for HTML5 data. RubyTabs is automatically initialized after markup have loaded.
isSlideshow	`false`	--	Turn on/off slideshow.
isNav	`false`	--	Turn on/off navigation tabs.
isPag	`true`	--	Turn on/off pagination(tablist) tabs.
isSwipe	`true`	--	Turn on/off swipe gestures on rubytabs.
isKeyboard	`false`	--	Turn on/off keyboard navigation, left/right arrow on keyboard to go prev/next slide.
isDeeplinking	`false`	--	Turn on/off deep-linkinging features.
isCookie	`false`	--	Turn on/off cookie features.
name	`null`	--	The proper name for each rubytabs in the site. Used to link components markup outside with main markup of rubytabs.
nameViewport	`viewport`	--	Set the name-class of the component "viewport".
nameCanvas	`canvas`	--	Set the name-class of the component "canvas".
nameSlide	`slide`	--	Set the name-class of the components "slides".
nameDataLazy	`src`	--	Name to be replaced in "data-src" on <img> tag using image lazyload function.

Options in load object
Variable	Default value	Description
preload	1	The number of slides(tabs) preloaded before the rubytabs appears.
amountEachLoad	2	The number next slides will load after rubytabs appears, the slides will load in parallel.
isLazy	true	Turn on/off only download the ImageLazy of selected slide.

Options in pag object
Variable	Default value	Description
type	"tabs"	Type of pagination(tablist). List of value : "thumbnail", "tabs", "bullet", "list".
width	null	Setup fixed width for pagItem. By default, the pagItem will get largest width in the pagItems.
height	null	Setup 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".
speed	300	Time 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".
moreClass	null	Adding classes to the pagination markup.
widthMinToHor	0	Minimum width of RubyTabs to switch to horizontal direction.
rangeMinToHor	0	Minimum width of browser-document to switch to horizontal direction.
isItemCurCenterWhenTap	true	Turn on/off the current pagItem automatically moves into the center position of pagination.
isArrow	true	Turn on/off navigation next/previous of pagItem.
isTapOnArrow	true	Add tap event on navigation next/previous
isMark	false	Turn 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
Variable	Default value	Description
isBody	false	Turn on/off swipe gestures in body content of tabs.
isAutoOnPag	true	Turn on/off auto swipe gestures on pagination when the total size of pagItems larger size pagination.

Notes

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.

HTML5 DATA

<div class="rt01" data-tabs='{
"fx"    : "line",
"speed"   : 400,
"slideshow" : {
"delay" : 5000,
"timer" : "line"
}
}'> ... </div>

JAVASCRIPT

// Setup options in javascript
$(".rt01").rubytabs({
"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>
...
</div>

DANH SÁCH OPTIONS

General options

Options in load object

Options in pag object

Options in swipe object