lorem ipsum dolor sit
lorem ipsum dolor sit
lorem ipsum dolor sit
lorem ipsum dolor sit
lorem ipsum dolor sit
lorem ipsum dolor sit
lorem ipsum dolor sit
lorem ipsum dolor sit
You need to put the following html markup in your html document where you want to have slider
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- template -->
<div class="ms-phone-template">
    <div class="ms-phone-cont">
        <img src="style/flat-phone.png" class="ms-phone-bg" />
        <div class="ms-lt-slider-cont">
            <!-- masterslider -->
            <div class="master-slider ms-skin-default" id="masterslider">
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/1.jpg" alt="lorem ipsum dolor sit"/> 
                </div>
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/2.jpg" alt="lorem ipsum dolor sit"/>        
                </div>
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/3.jpg" alt="lorem ipsum dolor sit"/>             
                </div>
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/4.jpg" alt="lorem ipsum dolor sit"/>           
                </div>
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/cover.jpg" alt="lorem ipsum dolor sit"/>    
                    <a href="http://player.vimeo.com/video/53914149" data-type="video"> vimeo video </a>
                </div>
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/5.jpg" alt="lorem ipsum dolor sit"/>                
                </div>
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/6.jpg" alt="lorem ipsum dolor sit"/>  
                </div>
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/7.jpg" alt="lorem ipsum dolor sit"/>   
                </div>
            </div>
            <!-- end of masterslider -->
        </div>
    </div>
</div>
<!-- end of template -->         
        
You need to put the following scripts just before the < ⁄ body>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
 
    var slider = new MasterSlider();
    slider.setup('masterslider' , {
        width:492,
        height:309,
        speed:20,
        preload:0,
        space:2,
        view:'mask'
    });
    slider.control('arrows');  
    slider.control('bullets',{autohide:false});
         
</script>
            
You need to import the following files
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Base MasterSlider style sheet -->
<link rel="stylesheet" href="../masterslider/style/masterslider.css" />
  
<!-- Master Slider Skin -->
<link href="../masterslider/skins/default/style.css" rel='stylesheet' type='text/css'>
  
  
<!-- MasterSlider Template Style -->
<link href='style/ms-phone-style.css' rel='stylesheet' type='text/css'>
 
<!-- jQuery -->
<script src="../masterslider/jquery.min.js"></script>
<script src="../masterslider/jquery.easing.min.js"></script>
 
<!-- Master Slider -->
<script src="../masterslider/masterslider.min.js"></script>