Multiple Slider in single page

Question

I'm trying to use two sliders in same page. Here's my html code for the two slider:

<div class="ms-showcase1">
    <!-- masterslider -->
    <div class="master-slider ms-skin-light-6 round-skin" id="masterslider1"></div>
</div>

<div class="ms-showcase1">
    <!-- masterslider -->
    <div class="master-slider ms-skin-light-6 round-skin" id="masterslider2"></div>
</div>

and my javascript code is:

<script type="text/javascript">     

var slider = new MasterSlider();
slider.setup('masterslider1' , {
    width:1324,
    height:485,
    space:0,
    fillMode:'fit',
    speed:25,
    preload:'all',
    view:'flow',
    loop:true
});

slider.control('bullets',{autohide:false});

$('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
});

SyntaxHighlighter.all();

var slider2 = new MasterSlider();
slider2.setup('masterslider2' , {
    width:1324,
    height:485,
    space:0,
    fillMode:'fit',
    speed:25,
    preload:'all',
    view:'flow',
    loop:true
});

slider2.control('bullets',{autohide:false});

$('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
});

SyntaxHighlighter.all();
</script>

So right now the first slider is working however the second doesn't even show on the browser when test it....

I was wondering if I miss anything....

I'm the beginner for this.. much appreciated for your help.

Answer 1

http://www.masterslider.com/doc/#quickstart

Please read documentation carefully!!!