{"title":"Adding Sliding Transitions","id":51982,"link":"https:\/\/env.averta.net\/en\/step\/adding-sliding-transitions\/","parent":[51848],"content":"

Master Slider supports different types of slide changing transitions. Some transitions have customization options to let you make a custom and unique looking transition. To set a transition for the slider you can set it by view<\/code> slider option. In this article, you can find out what are the available transitions and how you can customize them.<\/p>\n

Transition options<\/h2>\n

To set transition options, you need to set them as an object value to viewOption<\/code> slider option. Below you can find an example:<\/p>\n

    var slider = new MasterSlider();\r\n    slider.setup( 'headerSlider', {\r\n      width: 900,\r\n      height: 700,\r\n      view: 'transform',\r\n      viewOptions: {\r\n        rotateX: [-10, 10],\r\n        translateZ: [200, 200]\r\n      },\r\n      \/\/ other options ...\r\n    });\r\n<\/pre>\n
Basic transition<\/h2>\n
view: 'basic'<\/code><\/p>\n
The slider default transition is this one and it does not have any option to customize. It arranges slides horizontally or vertically next to each other.<\/p>\n
Fade transition<\/h2>\n
view: 'fade'<\/code><\/p>\n
Fades next or previous slider over current slide.<\/p>\n
Box transition<\/h2>\n
view: 'box'<\/code><\/p>\n
It makes a cube from slides and the cube rotates to change between slides.<\/p>\n
Note: <\/strong>This transition does not work correctly in IE since IE does not support CSS transform preserve-3d style.<\/p>\n
Scale transition<\/h2>\n
view: 'scale'<\/code><\/p>\n
It scales and fades slides over each other to navigate between them.<\/p>\n
Transition options<\/h3>\n\n\n\n\n\n
Name<\/td>\nDefault<\/td>\nDescription<\/td>\n<\/tr>\n<\/thead>\n
scaleFactor<\/td>\n-300<\/td>\nSpecifies the amount of scaling slides.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Mask transition<\/h2>\n
view: 'mask'<\/code><\/p>\n
It adds a mask over each slide and moves masks over the slides to navigate between them.<\/p>\n
Transition options<\/h3>\n\n\n\n\n\n\n
Name<\/td>\nDefault<\/td>\nDescription<\/td>\n<\/tr>\n<\/thead>\n
parallax<\/td>\n1<\/td>\nSpecifies how much slides moves when slider starts moving between slides.<\/td>\n<\/tr>\n
ease<\/td>\nnone<\/td>\nThis option specifies the easing function of changing numeral transition options values. You can find the list of all easing functions in this article<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Stack transition<\/h2>\n
view: 'stack'<\/code><\/p>\n
It makes a stacking transition, previous slides scale down and the new slide moves over them.<\/p>\n
Transition options<\/h3>\n\n\n\n\n\n
Name<\/td>\nDefault<\/td>\nDescription<\/td>\n<\/tr>\n<\/thead>\n
scaleFactor<\/td>\n-300<\/td>\nSpecifies the amount of scaling slides.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Focus transition<\/h2>\n
view: 'focus'<\/code><\/p>\n
This transition scales down all slides except the selected slide.<\/p>\n
Transition options<\/h3>\n\n\n\n\n\n\n\n
Name<\/td>\nDefault<\/td>\nDescription<\/td>\n<\/tr>\n<\/thead>\n
depth<\/td>\n[-1500, -1500]<\/td>\nSpecifies how much backward and forward slides scale down. This option value can be an array. Its first index specifies the value for backward slides and the second index forwards.<\/td>\n<\/tr>\n
perspective<\/td>\n2000<\/td>\nSpecifies the perspective point depth in pixels.<\/td>\n<\/tr>\n
limitTransform<\/td>\ntrue<\/td>\nLimits the transform values growth to first backward and forward slides<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Transform transition<\/h2>\n
view: 'transform'<\/code><\/p>\n
With this transition you can transform backward and forward slides by slider view options.<\/p>\n
Transition options<\/h3>\n\n\n\n\n\n\n\n\n\n
Name<\/td>\nDefault<\/td>\nDescription<\/td>\n<\/tr>\n<\/thead>\n
transform<\/td>\nnull<\/td>\nThis option is an object of transforms each transform function value is an array with two indexes to specify the value separately for backward and forward slides. Supported transform functions are listed next to this table.<\/td>\n<\/tr>\n
perspective<\/td>\n2000<\/td>\nSpecifies the perspective point depth in pixels.<\/td>\n<\/tr>\n
limitTransform<\/td>\ntrue<\/td>\nWhether limit the transform values growth to first backward and forward slides or not.<\/td>\n<\/tr>\n
opacity<\/td>\n[1,1]<\/td>\nSpecifies how much backward and forward slides fade. First index indicated backwards and next index forward slides.<\/td>\n<\/tr>\n
ease<\/td>\nnone<\/td>\nThis option specifies the easing function of changing numeral transition options values. You can find the list of all easing functions in this article<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Supported transform functions<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Name<\/td>\nDefault<\/td>\nDescription<\/td>\n<\/tr>\n<\/thead>\n
translateX<\/td>\n[0,0]<\/td>\nSpecifies the translateX value in pixels for backward and forward slides.<\/td>\n<\/tr>\n
translateY<\/td>\n[0,0]<\/td>\nSpecifies the translateY value in pixels for backward and forward slides.<\/td>\n<\/tr>\n
translateZ<\/td>\n[0,0]<\/td>\nSpecifies the translateZ value in pixels for backward and forward slides.<\/td>\n<\/tr>\n
rotateX<\/td>\n[0,0]<\/td>\nSpecifies the rotateX angle for backward and forward slides.<\/td>\n<\/tr>\n
rotateY<\/td>\n[0,0]<\/td>\nSpecifies the rotateY angle for backward and forward slides.<\/td>\n<\/tr>\n
rotateZ<\/td>\n[0,0]<\/td>\nSpecifies the rotateZ angle for backward and forward slides.<\/td>\n<\/tr>\n
scale<\/td>\n[1,1]<\/td>\nSpecifies the scale amount of backward and forward slides.<\/td>\n<\/tr>\n
skewX<\/td>\n[0,0]<\/td>\nSpecifies the skewX transform of backward and forward slides.<\/td>\n<\/tr>\n
skewY<\/td>\n[0,0]<\/td>\nSpecifies the skewY transform of backward and forward slides.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Wave transition<\/h2>\n
view: 'wave'<\/code><\/p>\n
This transition is a customized form of transform view.<\/p>\n
Fade wave transition<\/h2>\n
view: 'fadeWave'<\/code><\/p>\n
It is similar to wave transition plus fading slides.<\/p>\n
Fade basic transition<\/h2>\n
view: 'fadeBasic'<\/code><\/p>\n
This transition is a customized form of transform view. It is similar to basic transition but it also fades slides.<\/p>\n
Flow transition<\/h2>\n
view: 'flow'<\/code><\/p>\n
This transition is a customized form of transform view. It makes a cover flow transition.<\/p>\n
Fade flow transition<\/h2>\n
view: 'fadeFlow'<\/code><\/p>\n
It is similar to flow transition plus fading slides.<\/p>\n
Partial wave transition<\/h2>\n
view: 'partialWave'<\/code><\/p>\n
It is a custom form of transform view.<\/p>\n
Skew transition<\/h2>\n
view: 'skew'<\/code><\/p>\n
It is a custom form of transform view, it adds skew transform to the slides.<\/p>\n","type":"solution"}