Slider Actions are similar to Events but they are easier and faster to use. Master Slider triggers action before important events like slide change. It lets you run custom callbacks before each action in slider. In this article, you can find the list of all available actions in slider.
To use an action in your code, you need to add your callback by actions.add method. The snippet below echoes active slide index in the console when slide changes.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// shows the current slide in console every time slide changes.
slider.actions.add( 'slideChange', function(){
console.log( slider.index() );
});
actions.add
As it has demonstrated in the example above, actions.add method is used for adding callback to an action in slider. This method has three parameters:
actionStringThe slider action name.
callbackFunctionThe action callback function
referenceMixedValue to use as
this executing callback.Slider actions
| Name | Description | Callback parameters |
| init | After slider init | |
| timerChange | After any progress in slider auto play timer | |
| timerStart | On slider auto play timer start | |
| timerPause | On slider auto play timer pause | |
| overlayLayersSetup | After slider overlay layers setup | overlayLayers – Slider overlay layers instance object. |
| overlayLayersReady | After slider overlay layers ready | overlayLayers – Slider overlay layers instance object. |
| slideVideoOpen | After the slide video open (user clicked on play button on slide) | slide – Target slide instance. |
| slideVideoClose | After the slide video close | slide – Target slide instance. |
| slideVideoPlay | After slide video start playing | slide – Target slide instance. |
| slideVideoPause | After slide video pause | slide – Target slide instance. |
| slideVideoEnded | After slide video ended | slide – Target slide instance. |
| layersSetup | After slide layers setup | layerController – Slide layer controller.
slide – Target slide instance. |
| beforeLayoutSetup | Before slider layout setup | |
| fullWidthCalculate | After slider full-width layout size calculates | width – The new width size. |
| breakPointChange | After active breakpoint change | breakPoint – The active breakpoint name.
breakPointSize – The active breakpoint size in pixels. |
| layoutUpdate | After layout update | layoutController – The slider layout controller object instance. |
| narrowLayout | After layout changed to narrow style | layoutController – The slider layout controller object instance. |
| wideLayout | After layout changed to wide style | layoutController – The slider layout controller object instance. |
| beforeSlides | Before setting up the slides | |
| afterSlides | After setting up the slides | |
| slideChange | After slide change. | index – new slide index. |
| changeStart | After slide change start | |
| changeEnd | After slide change end | |
| nextBlock | When next is called but there is not slide in next | |
| next | After next method call | |
| previous | After previous method call | |
| previousBlock | When previous is called but there is no slide in previous | |
| swipeStart | After swipe start | |
| swipeMove | On swipe move | |
| swipeEnd | On swipe move end | |
| swipeCancel | On swipe move cancel | |
| viewScroll | On view starts scrolling (i.e. Slide changing animation progress) | position – The scroll position value. |
| slideStatusChange | After slide status change. Slide status indicates its appearance status. Possible status are in,passed,pending,leaving andentering. |
slide – The target slide.
status – New status. |
| slideResize | On slide resize | |
| slideBeforeSelect | On before selecting the slide | slide – The target slide. |
| slideSelect | On slide select | slide – The target slide. |
| slideDeselect | On slide deselect | slide – The target slide. |
| slideLoaded | On all assets in slide loaded | slide – The target slide. |
| slideBackgroundLoadComplete | On slide background image loaded | slide – The target slide. |
| layerAnimationInStart | After layer animation in start | layer – The target layer. |
| layerAnimationInEnd | After layer animation in end | layer – The target layer. |
| layerAnimationOutStart | After layer animation out start | layer – The target layer. |
| layerAnimationOutEnd | After layer animation out end | layer – The target layer. |
| layerAnimationBetweenStart | After layer animation between start | layer – The target layer. |
| layerAnimationBetweenEnd | After layer animation between end | layer – The target layer. |
| layerAnimationSetup | After layer animation setup | layer – The target layer. |
| layerLocate | After layer locate | layer – The target layer. |
| layerReady | After layer get ready (i.e. After it assets load) | layer – The target layer. |
| videoLayerPlay | Video layer starts playing | layer – The target layer. |
| videoLayerEnded | After video layer end | layer – The target layer. |
Snippets
slider.actions.add( 'init', function() {
// After slider init
});
slider.actions.add( 'timerChange', function() {
// After any progress in slider auto play timer
});
slider.actions.add( 'timerStart', function() {
// On slider auto play timer start
});
slider.actions.add( 'timerPause', function() {
// On slider auto play timer pause
});
slider.actions.add( 'overlayLayersSetup', function( overlayLayers ) {
// After slider overlay layers setup
});
slider.actions.add( 'overlayLayersReady', function( overlayLayers ) {
// After slider overlay layers ready
});
slider.actions.add( 'slideVideoOpen', function( slide ) {
// After the slide video open (user clicked on play button on slide)
});
slider.actions.add( 'slideVideoClose', function( slide ) {
// After the slide video close
});
slider.actions.add( 'slideVideoPlay', function( slide ) {
// After slide video start playing
});
slider.actions.add( 'slideVideoPause', function( slide ) {
// After slide video pause
});
slider.actions.add( 'slideVideoEnded', function( slide ) {
// After slide video ended
});
slider.actions.add( 'layersSetup', function( layerController, slide ) {
// After slide layers setup
});
slider.actions.add( 'beforeLayoutSetup', function() {
// Before slider layout setup
});
slider.actions.add( 'fullWidthCalculate', function( width ) {
// After slider full-width layout size calculates
});
slider.actions.add( 'breakPointChange', function( breakPoint, breakPointSize ) {
// After active breakpoint change
});
slider.actions.add( 'layoutUpdate', function( layoutController ) {
// After layout update
});
slider.actions.add( 'narrowLayout', function( layoutController ) {
// After layout changed to narrow style
});
slider.actions.add( 'wideLayout', function( layoutController ) {
// After layout changed to wide style
});
slider.actions.add( 'beforeSlides', function() {
// Before setting up the slides
});
slider.actions.add( 'afterSlides', function() {
// After setting up the slides
});
slider.actions.add( 'slideChange', function( index ) {
// After slide change
});
slider.actions.add( 'changeStart', function() {
// After slide change start
});
slider.actions.add( 'changeEnd', function() {
// After slide change end
});
slider.actions.add( 'nextBlock', function() {
// When next is called but there is not slide in next
});
slider.actions.add( 'next', function() {
// After next method call
});
slider.actions.add( 'previous', function() {
// After previous method call
});
slider.actions.add( 'previousBlock', function() {
// When previous is called but there is no slide in previous
});
slider.actions.add( 'swipeStart', function() {
// After swipe start
});
slider.actions.add( 'swipeMove', function() {
// On swipe move
});
slider.actions.add( 'swipeEnd', function() {
// On swipe move end
});
slider.actions.add( 'swipeCancel', function() {
// On swipe move cancel
});
slider.actions.add( 'viewScroll', function( position ) {
// On view starts scrolling (i.e. Slide changing animation progress)
});
slider.actions.add( 'slideStatusChange', function( slide, status ) {
// After slide status change. Slide status indicates its appearance status. Possible status are
// 'in', 'passed', 'pending', 'leaving', 'entering'
});
slider.actions.add( 'slideResize', function() {
// On slide resize
});
slider.actions.add( 'slideBeforeSelect', function( slide ) {
// On before selecting the slide
});
slider.actions.add( 'slideSelect', function( slide ) {
// On slide select
});
slider.actions.add( 'slideDeselect', function( slide ) {
// On slide deselect
});
slider.actions.add( 'slideLoaded', function( slide ) {
// On all assets in slide loaded
});
slider.actions.add( 'slideBackgroundLoadComplete', function( slide ) {
// On slide background image loaded
});
slider.actions.add( 'layerAnimationInStart', function( layer ) {
// After layer animation in start
});
slider.actions.add( 'layerAnimationInEnd', function( layer ) {
// After layer animation in end
});
slider.actions.add( 'layerAnimationOutStart', function( layer ) {
// After layer animation out start
});
slider.actions.add( 'layerAnimationOutEnd', function( layer ) {
// After layer animation out end
});
slider.actions.add( 'layerAnimationBetweenStart', function( layer ) {
// After layer animation between start
});
slider.actions.add( 'layerAnimationBetweenEnd', function( layer ) {
// After layer animation between end
});
slider.actions.add( 'layerAnimationSetup', function( layer ) {
// After layer animation setup
});
slider.actions.add( 'layerLocate', function( layer ) {
// After layer locate
});
slider.actions.add( 'layerReady', function( layer ) {
// After layer get ready (i.e. After it assets load)
});
slider.actions.add( 'videoLayerPlay', function( layer ) {
// Video layer starts playing
});
slider.actions.add( 'videoLayerEnded', function( layer ) {
// After video layer end
});