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 slider option. In this article, you can find out what are the available transitions and how you can customize them.
Transition options
To set transition options, you need to set them as an object value to viewOption slider option. Below you can find an example:
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
view: 'transform',
viewOptions: {
rotateX: [-10, 10],
translateZ: [200, 200]
},
// other options ...
});
Basic transition
view: 'basic'
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.
Fade transition
view: 'fade'
Fades next or previous slider over current slide.
Box transition
view: 'box'
It makes a cube from slides and the cube rotates to change between slides.
Note: This transition does not work correctly in IE since IE does not support CSS transform preserve-3d style.
Scale transition
view: 'scale'
It scales and fades slides over each other to navigate between them.
Transition options
| Name | Default | Description |
| scaleFactor | -300 | Specifies the amount of scaling slides. |
Mask transition
view: 'mask'
It adds a mask over each slide and moves masks over the slides to navigate between them.
Transition options
| Name | Default | Description |
| parallax | 1 | Specifies how much slides moves when slider starts moving between slides. |
| ease | none | This option specifies the easing function of changing numeral transition options values. You can find the list of all easing functions in this article. |
Stack transition
view: 'stack'
It makes a stacking transition, previous slides scale down and the new slide moves over them.
Transition options
| Name | Default | Description |
| scaleFactor | -300 | Specifies the amount of scaling slides. |
Focus transition
view: 'focus'
This transition scales down all slides except the selected slide.
Transition options
| Name | Default | Description |
| depth | [-1500, -1500] | Specifies 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. |
| perspective | 2000 | Specifies the perspective point depth in pixels. |
| limitTransform | true | Limits the transform values growth to first backward and forward slides |
Transform transition
view: 'transform'
With this transition you can transform backward and forward slides by slider view options.
Transition options
| Name | Default | Description |
| transform | null | This 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. |
| perspective | 2000 | Specifies the perspective point depth in pixels. |
| limitTransform | true | Whether limit the transform values growth to first backward and forward slides or not. |
| opacity | [1,1] | Specifies how much backward and forward slides fade. First index indicated backwards and next index forward slides. |
| ease | none | This option specifies the easing function of changing numeral transition options values. You can find the list of all easing functions in this article. |
Supported transform functions
| Name | Default | Description |
| translateX | [0,0] | Specifies the translateX value in pixels for backward and forward slides. |
| translateY | [0,0] | Specifies the translateY value in pixels for backward and forward slides. |
| translateZ | [0,0] | Specifies the translateZ value in pixels for backward and forward slides. |
| rotateX | [0,0] | Specifies the rotateX angle for backward and forward slides. |
| rotateY | [0,0] | Specifies the rotateY angle for backward and forward slides. |
| rotateZ | [0,0] | Specifies the rotateZ angle for backward and forward slides. |
| scale | [1,1] | Specifies the scale amount of backward and forward slides. |
| skewX | [0,0] | Specifies the skewX transform of backward and forward slides. |
| skewY | [0,0] | Specifies the skewY transform of backward and forward slides. |
Wave transition
view: 'wave'
This transition is a customized form of transform view.
Fade wave transition
view: 'fadeWave'
It is similar to wave transition plus fading slides.
Fade basic transition
view: 'fadeBasic'
This transition is a customized form of transform view. It is similar to basic transition but it also fades slides.
Flow transition
view: 'flow'
This transition is a customized form of transform view. It makes a cover flow transition.
Fade flow transition
view: 'fadeFlow'
It is similar to flow transition plus fading slides.
Partial wave transition
view: 'partialWave'
It is a custom form of transform view.
Skew transition
view: 'skew'
It is a custom form of transform view, it adds skew transform to the slides.