lorem ipsum dolor sit
thumb
thumb
thumb
thumb
thumb
thumb
thumb
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
<!-- template -->
<div class="ms-showcase2-template">
            <!-- 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"/> 
                    <img class="ms-thumb" src="img/thumbs/1.jpg" alt="thumb" />
                </div>
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/2.jpg" alt="lorem ipsum dolor sit"/>    
                     <img class="ms-thumb" src="img/thumbs/2.jpg" alt="thumb" />
                </div>
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/3.jpg" alt="lorem ipsum dolor sit"/>   
                     <img class="ms-thumb" src="img/thumbs/3.jpg" alt="thumb" />  
                </div>
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/4.jpg" alt="lorem ipsum dolor sit"/>   
                     <img class="ms-thumb" src="img/thumbs/4.jpg" alt="thumb" /> 
                </div>
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/5.jpg" alt="lorem ipsum dolor sit"/> 
                     <img class="ms-thumb" src="img/thumbs/5.jpg" alt="thumb" />      
                </div>
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/6.jpg" alt="lorem ipsum dolor sit"/>   
                     <img class="ms-thumb" src="img/thumbs/6.jpg" alt="thumb" />
                </div>
                <div class="ms-slide">
                    <img src="../masterslider/style/blank.gif" data-src="img/7.jpg" alt="lorem ipsum dolor sit"/> 
                     <img class="ms-thumb" src="img/thumbs/7.jpg" alt="thumb" />
                </div>
            </div>
            <!-- end of masterslider -->
</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.control('arrows');  
    slider.control('thumblist' , {autohide:false ,dir:'h',arrows:false, align:'bottom', width:127, height:137, margin:5, space:5});
 
    slider.setup('masterslider' , {
        width:540,
        height:586,
        space:5,
        view:'scale'
    });
     
</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
18
19
20
<!-- 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-showcase2.css' rel='stylesheet' type='text/css'>
 
<!-- google font Lato
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' 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>