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

	});