<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Master Slider Staff Carousel Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 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>
<style type="text/css">
.ms-staff-carousel .ms-staff-info{
min-height: 200px;
}
</style>
</head>
<body>
<!-- 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 -->
</body>
<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>
</html>