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
lorem ipsum dolor sit

JULIA B. MCRAFLANE

COMPANY CEO

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!-- template -->
<div class="ms-staff-carousel ms-round">
    <!-- masterslider -->
    <div class="master-slider" id="masterslider">
        <div class="ms-slide">
            <img src="../masterslider/style/blank.gif" data-src="img/1.jpg" alt="lorem ipsum dolor sit"/> 
            <div class="ms-info">
                <h3>JULIA B. MCRAFLANE</h3>
                <h4>COMPANY CEO</h4>
                <p class="email">E-Mail: <a href="#">juliab@jourrapide.com</a></p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
                <ul class="ms-socials">
                    <li class="ms-ico-fb"><a href="#">facebook</a></li>
                    <li class="ms-ico-tw"><a href="#">twitter</a></li>
                    <li class="ms-ico-gp"><a href="#">google+</a></li>
                    <li class="ms-ico-yt"><a href="#">youtube</a></li>
                </ul>
            </div>    
        </div>
        <div class="ms-slide">
            <img src="../masterslider/style/blank.gif" data-src="img/2.jpg" alt="lorem ipsum dolor sit"/>    
              <div class="ms-info">
                <h3>AMY CLAYTON</h3>
                <h4>PROGRAMMER</h4>
                <p class="email">E-Mail: <a href="#">amyclayton@teleor.us</a></p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
                <ul class="ms-socials">
                    <li class="ms-ico-fb"><a href="#">facebook</a></li>
                    <li class="ms-ico-tw"><a href="#">twitter</a></li>
                    <li class="ms-ico-gp"><a href="#">google+</a></li>
                    <li class="ms-ico-yt"><a href="#">youtube</a></li>
                </ul>
            </div>    
        </div>
        <div class="ms-slide">
            <img src="../masterslider/style/blank.gif" data-src="img/3.jpg" alt="lorem ipsum dolor sit"/>
              <div class="ms-info">
                <h3>FRED PENNER</h3>
                <h4>WEB DEVELOPER</h4>
                <p class="email">E-Mail: <a href="#">fredpenner@dayrep.com</a></p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
                <ul class="ms-socials">
                    <li class="ms-ico-fb"><a href="#">facebook</a></li>
                    <li class="ms-ico-tw"><a href="#">twitter</a></li>
                    <li class="ms-ico-gp"><a href="#">google+</a></li>
                    <li class="ms-ico-yt"><a href="#">youtube</a></li>
                </ul>
            </div>            
        </div>
        <div class="ms-slide">
            <img src="../masterslider/style/blank.gif" data-src="img/4.jpg" alt="lorem ipsum dolor sit"/>
             <div class="ms-info">
                <h3>MARTINA SAIZ</h3>
                <h4>UI DESIGNER</h4>
                <p class="email">E-Mail: <a href="#">martinasaiz@dayrep.com</a></p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
                <ul class="ms-socials">
                    <li class="ms-ico-fb"><a href="#">facebook</a></li>
                    <li class="ms-ico-tw"><a href="#">twitter</a></li>
                    <li class="ms-ico-gp"><a href="#">google+</a></li>
                    <li class="ms-ico-yt"><a href="#">youtube</a></li>
                </ul>
            </div>           
        </div>
        <div class="ms-slide">
            <img src="../masterslider/style/blank.gif" data-src="img/5.jpg" alt="lorem ipsum dolor sit"/>
             <div class="ms-info">
                <h3>JOSEPH B. SEWARD</h3>
                <h4>DEVELOPER</h4>
                <p class="email">E-Mail: <a href="#">josephbseward@teleworm.us</a></p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
                <ul class="ms-socials">
                    <li class="ms-ico-fb"><a href="#">facebook</a></li>
                    <li class="ms-ico-tw"><a href="#">twitter</a></li>
                    <li class="ms-ico-gp"><a href="#">google+</a></li>
                    <li class="ms-ico-yt"><a href="#">youtube</a></li>
                </ul>
            </div>             
        </div>
        <div class="ms-slide">
            <img src="../masterslider/style/blank.gif" data-src="img/6.jpg" alt="lorem ipsum dolor sit"/>
             <div class="ms-info">
                <h3>JANE LOPEZ</h3>
                <h4>COMPANY CEO</h4>
                <p class="email">E-Mail: <a href="#">janeplopez@rhyta.com</a></p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
                <ul class="ms-socials">
                    <li class="ms-ico-fb"><a href="#">facebook</a></li>
                    <li class="ms-ico-tw"><a href="#">twitter</a></li>
                    <li class="ms-ico-gp"><a href="#">google+</a></li>
                    <li class="ms-ico-yt"><a href="#">youtube</a></li>
                </ul>
            </div>          
        </div>
        <div class="ms-slide">
            <img src="../masterslider/style/blank.gif" data-src="img/7.jpg" alt="lorem ipsum dolor sit"/> 
             <div class="ms-info">
                <h3>JAMES RIDGWAY</h3>
                <h4>IT MANAGER</h4>
                <p class="email">E-Mail: <a href="#">jameslridgway@rhyta.com</a></p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
                <ul class="ms-socials">
                    <li class="ms-ico-fb"><a href="#">facebook</a></li>
                    <li class="ms-ico-tw"><a href="#">twitter</a></li>
                    <li class="ms-ico-gp"><a href="#">google+</a></li>
                    <li class="ms-ico-yt"><a href="#">youtube</a></li>
                </ul>
            </div>    
        </div>
         <div class="ms-slide">
            <img src="../masterslider/style/blank.gif" data-src="img/8.jpg" alt="lorem ipsum dolor sit"/> 
             <div class="ms-info">
                <h3>PATRICIA BURNS</h3>
                <h4>SYSTEM ADMIN</h4>
                <p class="email">E-Mail: <a href="#">patriciaburns@dayrep.com</a></p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
                <ul class="ms-socials">
                    <li class="ms-ico-fb"><a href="#">facebook</a></li>
                    <li class="ms-ico-tw"><a href="#">twitter</a></li>
                    <li class="ms-ico-gp"><a href="#">google+</a></li>
                    <li class="ms-ico-yt"><a href="#">youtube</a></li>
                </ul>
            </div>    
        </div>
        <div class="ms-slide">
            <img src="../masterslider/style/blank.gif" data-src="img/9.jpg" alt="lorem ipsum dolor sit"/> 
             <div class="ms-info">
                <h3>TERRY THOMPSON</h3>
                <h4>REVIEWER</h4>
                <p class="email">E-Mail: <a href="#">terrythompson@teleworm.us</a></p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
                <ul class="ms-socials">
                    <li class="ms-ico-fb"><a href="#">facebook</a></li>
                    <li class="ms-ico-tw"><a href="#">twitter</a></li>
                    <li class="ms-ico-gp"><a href="#">google+</a></li>
                    <li class="ms-ico-yt"><a href="#">youtube</a></li>
                </ul>
            </div>    
        </div>
    </div>
    <!-- end of masterslider -->
    <div class="ms-staff-info" id="staff-info"> </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
17
18
19
<script type="text/javascript">  
     
    var slider = new MasterSlider();
    slider.setup('masterslider' , {
        loop:true,
        width:240,
        height:240,
        speed:20,
        view:'focus',
        preload:0,
        space:0,
        space:35,
        viewOptions:{centerSpace:1.6}
    });
    slider.control('arrows');
    slider.control('slideinfo',{insertTo:'#staff-info'});
     
</script>
            
You need to import the following files
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- Base MasterSlider style sheet -->
<link rel="stylesheet" href="../masterslider/style/masterslider.css" />
  
<!-- MasterSlider Template Style -->
<link href='style/ms-staff-style.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>