Master Slider Staff Carousel Template

You need to put the following html markup in your html document where you want to have slider

			
		<!-- 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="#">[email protected]</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="#">[email protected]</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="#">[email protected]</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="#">[email protected]</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="#">[email protected]</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="#">[email protected]</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="#">[email protected]</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="#">[email protected]</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="#">[email protected]</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>

	<script type="text/javascript">	

		var slider = new MasterSlider();
		slider.setup('masterslider' , {
			loop:true,
			width:240,
			height:240,
			speed:20,
			view:'fadeBasic',
			preload:0,
			space:0,
			space:45
		});
		slider.control('arrows');
		slider.control('slideinfo',{insertTo:'#staff-info'});
		
	</script>

You need to import the following files

		<!-- 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>