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.
Slider methods
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.
count()
Returns to the total number of slides in the slider.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
slider.actions.add( 'init', function(){
// shows the slides length in console
console.log( slider.count() );
});
currentTime()
Returns the current progress of autoplay timer between 0 and 100.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
slider.actions.add( 'timerChange', function(){
// shows the timer progress value in console every time it changes.
console.log( slider.currentTime() );
});
currentSlide()
Returns the selected slide.
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.currentSlide() );
});
gotoSlide(index, fast, direction, duration, ease)
Navigates to the given slide index.
falsenull. It only is effective when loop navigation is activated and it chooses shortest path if no value set (null). Possible values are 'forward' and 'backward'. var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// Every time user clicks on slider, it changes to the third slide by animation.
slider.element.addEventListener( 'click', function() {
slider.gotoSlide( 2, false, 'forward', 2.5, 'Elastic.easeOut' );
});
Note: This method uses GSAP animation only when you pass a duration value, otherwise, it uses internal slick transition when fast parameter is not true.
hideLayer(layerId, delay)
Hides the specified layer with its defined hide animation (animation out).
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// When user clicks on the slider, the layer with "logo" id hides after one second.
slider.element.addEventListener( 'click', function() {
slider.hideLayer( 'logo', 1000 );
});
hideLayers(layerIds, delay)
Hides the specified layer with its defined hide animation (animation out).
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// When user clicks on the slider, the layers with "logo" and "title" id hide after one second.
slider.element.addEventListener( 'click', function() {
slider.hideLayers( ['logo', 'title'], 1000 );
});
index()
Returns the current active slide’s index.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// shows the current slide's index in console every time slide changes.
slider.actions.add( 'slideChange', function(){
console.log( slider.index() );
});
isPaused()
Indicates whether the slider autoplay is paused or not.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// shows in the console whether the slider autoplay is paused or not.
slider.actions.add( 'slideChange', function(){
console.log( slider.isPaused() );
});
next(fast, duration, ease)
Navigates to the next slide.
false var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// Every time user clicks on slider, it changes to the next slide by animation.
slider.element.addEventListener( 'click', function() {
slider.next( false, 2.5, 'Elastic.easeOut' );
});
Note: This method uses GSAP animation only when you pass a duration value, otherwise, it uses internal slick transition when fast parameter is not true.
pause()
Pauses the slider autoplay.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
autoplay: true
// other options ...
});
// When user clicks on the slider, it pauses the autoplay
slider.element.addEventListener( 'click', function() {
slider.pause();
});
previous(fast, duration, ease)
Navigates to the previous slide.
false var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// Every time user clicks on slider, it changes to the previous slide by animation.
slider.element.addEventListener( 'click', function() {
slider.previous( false, 2.5, 'Elastic.easeOut' );
});
Note: This method uses GSAP animation only when you pass a duration value, otherwise, it uses internal slick transition when fast parameter is not true.
resetTimer()
Rests the slider autoplay timer.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
autoplay: true
// other options ...
});
// When user clicks on the slider, it resets the autoplay timer
slider.element.addEventListener( 'click', function() {
slider.resetTimer();
});
resume()
Resumes the slider autoplay timer.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
autoplay: true
// other options ...
});
// When user clicks on the slider, it resumes the autoplay timer
slider.element.addEventListener( 'click', function() {
slider.resume();
});
showLayer(layerId, delay)
Shows the specified layer with its defined show animation (animation in).
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// When user clicks on the slider, the layer with "logo" id shows after one second.
slider.element.addEventListener( 'click', function() {
slider.showLayer( 'logo', 1000 );
});
Note: If you need to show a layer only when the method is called and prevent it from appearing automatically, you need to set wait parameter in the layer animation params. For more information check out Animating layers article.
showLayers(layerIds, delay)
Shows the specified layer with its defined show animation (animation out).
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// When user clicks on the slider, the layers with "logo" and "title" id show after one second.
slider.element.addEventListener( 'click', function() {
slider.showLayers( ['logo', 'title'], 1000 );
});
Note: If you need to show a layer only when the method is called and prevent it from appearing automatically, you need to set wait parameter in the layer animation params. For more information check out Animating layers article.
toggleLayer(layerId, delay)
Toggles between show and hide animations (animation in and out) of the layer.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// When user clicks on the slider, the layer with "logo" id shows after one second.
slider.element.addEventListener( 'click', function() {
slider.toggleLayer( 'logo', 1000 );
});
Note: If you need to show a layer only when the method is called and prevent it from appearing automatically, you need to set wait parameter in the layer animation params. For more information check out Animating layers article.
toggleLayers(layerIds, delay)
Toggles between show and hide animations (animation in and out) of the layers.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// When user clicks on the slider, the layers with "logo" and "title" id show after one second.
slider.element.addEventListener( 'click', function() {
slider.toggleLayers( ['logo', 'title'], 1000 );
});
Note: If you need to show a layer only when the method is called and prevent it from appearing automatically, you need to set wait parameter in the layer animation params. For more information check out Animating layers article.
destroy(insertMarkup)
Destroys the slider and cleans up the memory.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// When user clicks on the slider, the slider terminated and it adds the initial slider markup in the page.
slider.element.addEventListener( 'click', function() {
slider.destroy( true );
});
update()
Update the slider, it checks the slider location in page and gives a size to it again.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
slider.element.addEVentListener('click', function() {
slider.update();
});
holdOn()
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() call. The number of calling this method is important. For example if you call this method twice you need to call the release() method to start the slider initialization.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// prevents the auto init and waits for a release call.
slider.holdOn();
Note: 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.
release()
After calling a holdOn() method you need to call this method to tel the slider to initialize.
var slider = new MasterSlider();
slider.setup( 'headerSlider', {
width: 900,
height: 700,
// other options ...
});
// prevents the auto init and waits for a release call.
slider.holdOn();
// take some other actions here..
slider.release();
Note: 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.