How to have multiple sliders on a single page?

1- Include the required files each file only once.
2- Copy and past the slider HTML Markup for each slider where you want to have slider but With different id.

For example first slider div element with “masterslider1” id:

<div class="master-slider ms-skin-default" id="masterslider1"> </div>

and second slider with?”masterslider2″ id:

<div class="master-slider ms-skin-default" id="masterslider2"> </div>

3- Create the JavaScript code for each slider with slider’s id and different instance.?and based on the slider’s id now we have to JavaScript code for them.

the JavaScript code for Slider one with the id of “masterslider1”

  var slider = new MasterSlider();
    slider.setup('masterslider1' , {
            width:800,    // slider standard width
            height:350,   // slider standard height
            space:5
            // more slider options goes here...
            // check slider options section in documentation for more options.
        });
    // adds Arrows navigation control to the slider.
    slider.control('arrows');

the JavaScript code for Slider one with the id of “masterslider2”

  var slider2 = new MasterSlider();
    slider2.setup('masterslider2' , {
            width:800,    // slider standard width
            height:350,   // slider standard height
            space:5
            // more slider options goes here...
            // check slider options section in documentation for more options.
        });
    // adds Arrows navigation control to the slider.
    slider2.control('arrows');