• Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy
Averta Support Center
  • Home
  • Documentations
    • Phlox WordPress Theme
    • Phlox Pro WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress Pro
    • Master Slider WordPress Free
    • LOTUS WordPress Theme
  • Video Tutorials
    • Phlox ? Video Tutorials
    • Master Slider WP Pro
    • Master Slider WP Free
    • Master Slider jQuery
    • Lotus ? Video Tutorials
  • FAQ
    • General Questions
    • LOTUS WordPress Theme
    • Master Slider jQuery
    • Master Slider WordPress
    • CUTE Slider
  • Knowledge base
    • Beginners
    • Advanced Techniques
    • WordPress plugins
  • Support Forum
    • Login Or Register
    • Support Forum
    • Support Policy

Looking for the answer

Getting to Know Actions


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 and
entering.
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
      
    });

Was this information helpful?

Submit
Wizard Home
Related articles list
Create New Support Ticket
Copyright © 2017 Averta. All rights reserved.