• 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

Setting Up Sliders with Setup Method


In order to setup a slider, you need to add the related JS setup code in the page. In this article you can find out how to create a new JavaScript setup for the slider.

Note: You can also setup the slider like any other jQuery plugins . For more information, check out this page.

Creating new instance from Master Slider

After importing Master Slider JavaScript file to the page, it will be available as a class. You need to create a new instance from it to initialize the slider. The example below creates a new instance from Master Slider class:

	var slider = new MasterSlider();

In continue, you can use?slider?to setup the slider, in addition, you can use it to add UI controls or access to the API.

Setting up the slider

To setup the slider, you need to call?setup?method. It has two parameters:

Name Description
target Specifies the slider element in the DOM, possible values are string that determines as the element ID in the DOM or an Element object.
options The list of the options that configures the slider. Options defines by an object.
You can find the list all slider options here.

The following example finds first element with?headerSlider?id value in the DOM and setups the slider on it.

	var slider = new MasterSlider();
	slider.setup( 'headerSlider', {
		width: 900,
		height: 700,
		// other options ...
	});

Setting up the slider when the slider JS file is added to the end of body

If you want to import slier JS file after page content (i.e. end of the body element) or loads the JS file asynchronously, you need to consider a callback registration for the slider setup script to let Master Slider find all slider setup scripts in the page. The following example shows how to put the slider setup script inside a callback:

	(window.MSCB = window.MSCB || []).push( function() {

		var slider = new MasterSlider();
		slider.setup( 'headerSlider', {
			width: 900,
			height: 700,
			// other options ...
		}); 

	});

Was this information helpful?

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