Adding Sliding Transitions

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.