You need to put the following html markup in your html document where you want to have slider
	<!-- template -->
	<div class="ms-lightbox-template">
				<!-- masterslider -->
				<div class="master-slider ms-skin-default" id="masterslider">
				    <div class="ms-slide">
				        <img src="../masterslider/blank.gif" data-src="img/1.jpg" alt="lorem ipsum dolor sit"/>  
				        <img class="ms-thumb" src="img/thumbs/1.jpg" alt="thumb" />
				        <a href="img/1.jpg" class="ms-lightbox" rel="prettyPhoto[gallery1]" title="lorem ipsum dolor sit"> lightbox </a>
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/blank.gif" data-src="img/2.jpg" alt="lorem ipsum dolor sit"/>     
				        <img class="ms-thumb" src="img/thumbs/2.jpg" alt="thumb" />
				        <a href="img/2.jpg" class="ms-lightbox" rel="prettyPhoto[gallery1]" title="lorem ipsum dolor sit"> lightbox </a>
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/blank.gif" data-src="img/3.jpg" alt="lorem ipsum dolor sit"/>    
				        <img class="ms-thumb" src="img/thumbs/3.jpg" alt="thumb" />  
				        <a href="img/3.jpg" class="ms-lightbox" rel="prettyPhoto[gallery1]" title="lorem ipsum dolor sit"> lightbox </a> 
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/blank.gif" data-src="img/4.jpg" alt="lorem ipsum dolor sit"/>    
				        <img class="ms-thumb" src="img/thumbs/4.jpg" alt="thumb" />  
				        <a href="img/4.jpg" class="ms-lightbox" rel="prettyPhoto[gallery1]" title="lorem ipsum dolor sit"> lightbox </a>
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/blank.gif" data-src="img/5.jpg" alt="lorem ipsum dolor sit"/>  
				        <img class="ms-thumb" src="img/thumbs/5.jpg" alt="thumb" /> 
				        <a href="img/5.jpg" class="ms-lightbox" rel="prettyPhoto[gallery1]" title="lorem ipsum dolor sit"> lightbox </a>      
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/blank.gif" data-src="img/6.jpg" alt="lorem ipsum dolor sit"/>    
				        <img class="ms-thumb" src="img/thumbs/6.jpg" alt="thumb" />
				        <a href="img/6.jpg" class="ms-lightbox" rel="prettyPhoto[gallery1]" title="lorem ipsum dolor sit"> lightbox </a>
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/blank.gif" data-src="img/7.jpg" alt="lorem ipsum dolor sit"/>  
				        <img class="ms-thumb" src="img/thumbs/7.jpg" alt="thumb" />
				        <a href="img/7.jpg" class="ms-lightbox" rel="prettyPhoto[gallery1]" title="lorem ipsum dolor sit"> lightbox </a>
				    </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('lightbox');	
		slider.control('thumblist' , {autohide:false ,dir:'h',align:'bottom', width:130, height:85, margin:5, space:5 , hideUnder:400});

		slider.setup('masterslider' , {
			width:750,
			height:500,
			space:5,
			loop:true,
			view:'fade'
		});
		
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto();
		});
		
	</script>
				
You need to import the following files
		<!-- Base MasterSlider style sheet -->
		<link href="../masterslider/style/masterslider.css" type='text/css' rel="stylesheet"/>
		
		<!-- Master Slider Skin -->
		<link href="../masterslider/skins/default/style.css" rel='stylesheet' type='text/css'>
		 
		<!-- MasterSlider Template Style -->
		<link href='style/ms-lightbox.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-1.10.2.min.js"></script>
		<script src="../masterslider/jquery.easing.min.js"></script>
		
		<!-- Master Slider -->
		<script src="../masterslider/masterslider.min.js"></script>
		
		<!-- Prettyphoto Lightbox jQuery Plugin -->
		<link href="css/prettyPhoto.css"  rel='stylesheet' type='text/css'/>
		<script src="js/jquery.prettyPhoto.js"></script>