{"title":"Getting to Know Functions","id":52030,"link":"https:\/\/env.averta.net\/en\/step\/getting-to-know-functions\/","parent":[51858],"content":"

Here you can find the list of all available methods and properties in Master Slider instance. These methods and properties let you control the slider and have access to important objects, like slides and layers.<\/p>\n

Slider methods<\/h2>\n

You have access to these methods directly from the slider instance object, plus, you can use them in the layer actions, for more information about layer actions, check out this article<\/a>.<\/p>\n

count()<\/h3>\n

Returns to the total number of slides in the slider.<\/p>\n

    var slider = new MasterSlider();\r\n    slider.setup( 'headerSlider', {\r\n      width: 900,\r\n      height: 700,\r\n      \/\/ other options ...\r\n    });\r\n\r\n    slider.actions.add( 'init', function(){\r\n      \/\/ shows the slides length in console\r\n      console.log( slider.count() );\r\n    });<\/pre>\n
currentTime()<\/h3>\n
Returns the current progress of autoplay timer between 0 and 100.<\/p>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  slider.actions.add( 'timerChange', function(){\r\n    \/\/ shows the timer progress value in console every time it changes.\r\n    console.log( slider.currentTime() );\r\n  });<\/pre>\n
currentSlide()<\/h3>\n
Returns the selected slide.<\/p>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ shows the current slide in console every time slide changes.\r\n  slider.actions.add( 'slideChange', function(){\r\n    console.log( slider.currentSlide() );\r\n  });<\/pre>\n
gotoSlide(index, fast, direction, duration, ease)<\/h3>\n
Navigates to the given slide index.<\/p>\n
indexNumberThe target slide index, starting from 0.<\/div>\n
fastBooleanWhether fast move or not. Default value is false<\/code><\/div>\n
directionStringThe preferred direction of navigation. Default value is null<\/code>. It only is effective when loop navigation is activated and it chooses shortest path if no value set (null<\/code>). Possible values are 'forward'<\/code> and 'backward'<\/code>.<\/div>\n
durationNumberThe animation duration in seconds.<\/div>\n
easeString | FunctionThe GSAP easing function, for more information check out?this page<\/a>.<\/div>\n
<\/div>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ Every time user clicks on slider, it changes to the third slide by animation.\r\n  slider.element.addEventListener( 'click', function() { \r\n    slider.gotoSlide( 2, false, 'forward', 2.5, 'Elastic.easeOut' );\r\n  });<\/pre>\n
Note: <\/strong>This method uses GSAP animation only when you pass a duration value, otherwise, it uses internal slick transition when fast parameter is not true.<\/p>\n
hideLayer(layerId, delay)<\/h3>\n
Hides the specified layer with its defined hide animation (animation out).<\/p>\n
layerIdStringThe target layer Id. For more information about layer id check Layer id<\/a> article.<\/div>\n
delayNumberThe delay amount before hiding the layer in milliseconds.<\/div>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ When user clicks on the slider, the layer with \"logo\" id hides after one second.\r\n  slider.element.addEventListener( 'click', function() { \r\n    slider.hideLayer( 'logo', 1000 );\r\n  });<\/pre>\n
hideLayers(layerIds, delay)<\/h3>\n
Hides the specified layer with its defined hide animation (animation out).<\/p>\n
layerIdsArrayAn array of layer ids. For more information about layer id check Layer id<\/a> article.<\/div>\n
delayNumberThe delay amount before hiding the layer in milliseconds.<\/div>\n
<\/div>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ When user clicks on the slider, the layers with \"logo\" and \"title\" id hide after one second.\r\n  slider.element.addEventListener( 'click', function() { \r\n    slider.hideLayers( ['logo', 'title'], 1000 );\r\n  });<\/pre>\n
index()<\/h3>\n
Returns the current active slide’s index.<\/p>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ shows the current slide's index in console every time slide changes.\r\n  slider.actions.add( 'slideChange', function(){\r\n    console.log( slider.index() );\r\n  });<\/pre>\n
isPaused()<\/h3>\n
Indicates whether the slider autoplay is paused or not.<\/p>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ shows in the console whether the slider autoplay is paused or not.\r\n  slider.actions.add( 'slideChange', function(){\r\n    console.log( slider.isPaused() );\r\n  });<\/pre>\n
next(fast, duration, ease)<\/h3>\n
Navigates to the next slide.<\/p>\n
fastBooleanWhether fast move or not. Default value is false<\/code><\/div>\n
durationNumberThe animation duration in seconds.<\/div>\n
easeString | FunctionThe GSAP easing function, for more information check out?this page<\/a>.<\/div>\n
<\/div>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ Every time user clicks on slider, it changes to the next slide by animation.\r\n  slider.element.addEventListener( 'click', function() { \r\n    slider.next( false, 2.5, 'Elastic.easeOut' );\r\n  });<\/pre>\n
Note: <\/strong>This method uses GSAP animation only when you pass a duration value, otherwise, it uses internal slick transition when fast parameter is not true.<\/p>\n
pause()<\/h3>\n
Pauses the slider autoplay.<\/p>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    autoplay: true\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ When user clicks on the slider, it pauses the autoplay\r\n  slider.element.addEventListener( 'click', function() { \r\n    slider.pause();\r\n  });<\/pre>\n
previous(fast, duration, ease)<\/h3>\n
Navigates to the previous slide.<\/p>\n
fastBooleanWhether fast move or not. Default value is false<\/code><\/div>\n
durationNumberThe animation duration in seconds.<\/div>\n
easeString | FunctionThe GSAP easing function, for more information check out?this page<\/a>.<\/div>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ Every time user clicks on slider, it changes to the previous slide by animation.\r\n  slider.element.addEventListener( 'click', function() { \r\n    slider.previous( false, 2.5, 'Elastic.easeOut' );\r\n  });<\/pre>\n
Note: <\/strong>This method uses GSAP animation only when you pass a duration value, otherwise, it uses internal slick transition when fast parameter is not true.<\/p>\n
resetTimer()<\/h3>\n
Rests the slider autoplay timer.<\/p>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    autoplay: true\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ When user clicks on the slider, it resets the autoplay timer\r\n  slider.element.addEventListener( 'click', function() { \r\n    slider.resetTimer();\r\n  });<\/pre>\n
resume()<\/h3>\n
Resumes the slider autoplay timer.<\/p>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    autoplay: true\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ When user clicks on the slider, it resumes the autoplay timer\r\n  slider.element.addEventListener( 'click', function() { \r\n    slider.resume();\r\n  });<\/pre>\n
showLayer(layerId, delay)<\/h3>\n
Shows the specified layer with its defined show animation (animation in).<\/p>\n
layerIdStringThe target layer Id. For more information about layer id check Layer id<\/a> article.<\/div>\n
delayNumberThe delay amount before showing the layer in milliseconds.<\/div>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ When user clicks on the slider, the layer with \"logo\" id shows after one second.\r\n  slider.element.addEventListener( 'click', function() { \r\n    slider.showLayer( 'logo', 1000 );\r\n  });<\/pre>\n
Note: <\/strong>If you need to show a layer only when the method is called and prevent it from appearing automatically, you need to set wait<\/code> parameter in the layer animation params. For more information check out Animating layers<\/a> article.<\/p>\n
showLayers(layerIds, delay)<\/h3>\n
Shows the specified layer with its defined show animation (animation out).<\/p>\n
layerIdsArrayAn array of layer ids. For more information about layer id check Layer id<\/a> article.<\/div>\n
delayNumberThe delay amount before hiding the layer in milliseconds.<\/div>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ When user clicks on the slider, the layers with \"logo\" and \"title\" id show after one second.\r\n  slider.element.addEventListener( 'click', function() { \r\n    slider.showLayers( ['logo', 'title'], 1000 );\r\n  });<\/pre>\n
Note: <\/strong>If you need to show a layer only when the method is called and prevent it from appearing automatically, you need to set wait<\/code> parameter in the layer animation params. For more information check out Animating layers<\/a> article.<\/p>\n
toggleLayer(layerId, delay)<\/h3>\n
Toggles between show and hide animations (animation in and out) of the layer.<\/p>\n
layerIdStringThe target layer Id. For more information about layer id check Layer id<\/a> article.<\/div>\n
delayNumberThe delay amount before showing the layer in milliseconds.<\/div>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ When user clicks on the slider, the layer with \"logo\" id shows after one second.\r\n  slider.element.addEventListener( 'click', function() { \r\n    slider.toggleLayer( 'logo', 1000 );\r\n  });<\/pre>\n
Note: <\/strong>If you need to show a layer only when the method is called and prevent it from appearing automatically, you need to set wait<\/code> parameter in the layer animation params. For more information check out Animating layers<\/a> article.<\/p>\n
toggleLayers(layerIds, delay)<\/h3>\n
Toggles between show and hide animations (animation in and out) of the layers.<\/p>\n
layerIdsArrayAn array of layer ids. For more information about layer id check Layer id<\/a> article.<\/div>\n
delayNumberThe delay amount before hiding the layer in milliseconds.<\/div>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ When user clicks on the slider, the layers with \"logo\" and \"title\" id show after one second.\r\n  slider.element.addEventListener( 'click', function() { \r\n    slider.toggleLayers( ['logo', 'title'], 1000 );\r\n  });<\/pre>\n
Note: <\/strong>If you need to show a layer only when the method is called and prevent it from appearing automatically, you need to set wait<\/code> parameter in the layer animation params. For more information check out Animating layers<\/a> article.<\/p>\n
destroy(insertMarkup)<\/h3>\n
Destroys the slider and cleans up the memory.<\/p>\n
insertMarkupBooleanWhether inserts the initial slider markup after slider termination.<\/div>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ When user clicks on the slider, the slider terminated and it adds the initial slider markup in the page.\r\n  slider.element.addEventListener( 'click', function() { \r\n    slider.destroy( true );\r\n  });<\/pre>\n
update()<\/h3>\n
Update the slider, it checks the slider location in page and gives a size to it again.<\/p>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  slider.element.addEVentListener('click', function() {\r\n    slider.update();\r\n  });<\/pre>\n
holdOn()<\/h3>\n
Prevents the slider to initialize automatically. It is useful when you need to take make changes in the slider params or markup just before its initialization. After calling this method, slider waits for a release()<\/code> call. The number of calling this method is important. For example if you call this method twice you need to call the release()<\/code> method to start the slider initialization.<\/p>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ prevents the auto init and waits for a release call.\r\n  slider.holdOn();<\/pre>\n
Note: <\/strong>This method is only effective if it calls before slider init. In addition, it does not work when it calls by a layer action since the layer appears after slider init.<\/p>\n
release()<\/h3>\n
After calling a holdOn()<\/code> method you need to call this method to tel the slider to initialize.<\/p>\n
  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    \/\/ other options ...\r\n  });\r\n\r\n  \/\/ prevents the auto init and waits for a release call.\r\n  slider.holdOn();\r\n\r\n  \/\/ take some other actions here.. \r\n\r\n  slider.release();<\/pre>\n
Note: <\/strong>This method is only effective if it calls before slider init. In addition, it does not work when it calls by a layer action since the layer appears after slider init.<\/p>\n","type":"solution"}