Master Slider Partial View Template

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

	<!-- template -->
	<div class="ms-partialview-template" id="partial-view-1">
				<!-- 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 class="ms-info">
				        	<h3>CHILDHOOD MEMORIES</h3>
				        	<h4>JOHN WILIAM</h4>
				        	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
			        	</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>CONSECTETUR ADIPISCING ELIT</h3>
				        	<h4>JOHN WILIAM</h4>
				        	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
			        	</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>SUSPENDISSE UT PULVINAR MAURIS</h3>
				        	<h4>JOHN WILIAM</h4>
				        	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
			        	</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>SED DAPIBUS SIT AMET FELIS</h3>
				        	<h4>JOHN WILIAM</h4>
				        	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
			        	</div>   
				    </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 class="ms-info">
				        	<h3>CHEETAHS ON THE EDGE</h3>
				        	<h4>GREGORY WILSON</h4>
				        	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
			        	</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>CONSECTETUR ADIPISCING ELIT</h3>
				        	<h4>JOHN WILIAM</h4>
				        	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
			        	</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>SED A SEM AT LIBERO SODALES</h3>
				        	<h4>JOHN WILIAM</h4>
				        	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
			        	</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>VITAE ULTRICIES ALIQUET</h3>
				        	<h4>JOHN WILIAM</h4>
				        	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
			        	</div>  
				    </div>
				</div>
				<!-- end of masterslider -->
	</div>
	<!-- end of template -->

You need to put the following scripts just before the < ⁄ body>

	<script type="text/javascript">		
	
		var slider = new MasterSlider();
		
		slider.control('arrows');	
		slider.control('slideinfo',{insertTo:"#partial-view-1" , autohide:false, align:'bottom', size:160});
		slider.control('circletimer' , {color:"#FFFFFF" , stroke:9});
		
		slider.setup('masterslider' , {
			width:760,
			height:400,
			space:10,
			loop:true,
			view:'fadeWave',
			layout:'partialview'
		});

	</script>

You need to import the following files

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