You need to put the following html markup in your html document where you want to have slider 
	<!-- template -->
	<div class="ms-gallery-template" id="ms-gallery-1">
				<!-- masterslider -->
				<div class="master-slider ms-skin-black-2 round-skin" id="masterslider">
				    <div class="ms-slide">
				        <img src="../masterslider/style/blank.gif" data-src="img/1.jpg" alt="lorem ipsum dolor sit"/> 
				        <img src="img/thumbs/1.jpg" alt="thumb-1" class="ms-thumb"/>
				        <div class="ms-info">
				        	LOREM IPSUM DOLOR SIT AMET
				        </div>
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/style/blank.gif" data-src="img/2.jpg" alt="lorem ipsum dolor sit"/>     
				         <img src="img/thumbs/2.jpg" alt="thumb-2" class="ms-thumb"/>
				         <div class="ms-info">
				        	CONSECTETUR ADIPISCING ELIT
				        </div>
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/style/blank.gif" data-src="img/3.jpg" alt="lorem ipsum dolor sit"/>    
				          <img src="img/thumbs/3.jpg" alt="thumb-3" class="ms-thumb"/>
				         <div class="ms-info">
				        	SUSPENDISSE UT PULVINAR MAURIS
				        </div>   
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/style/blank.gif" data-src="img/4.jpg" alt="lorem ipsum dolor sit"/>    
				         <img src="img/thumbs/4.jpg" alt="thumb-4" class="ms-thumb"/>
				         <div class="ms-info">
				        	SED DAPIBUS SIT AMET FELIS
				        </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>
				   		<img src="img/thumbs/cover-thumb.jpg" alt="thumb-4" class="ms-thumb"/>
				         <div class="ms-info">
				        	YOUTUBE AND VIMEO VIDEOS
				        </div> 
				        <h5 class="ms-layer video-title video-top-title" style="left:243px; top:29px "
				        	data-effect="left(150)"
				        	data-duration="3500"
				        	data-ease="easeOutExpo"
				        	data-delay="50"
				        >DIRECTOR’S CUT</h5>
						
						<h4 class="ms-layer video-title" style="left:240px; top:44px "
				        	data-effect="front(500)"
				        	data-duration="5000"
				        	data-ease="easeOutExpo"
				        	data-delay="400"
				        >CHEETAHS ON THE EDGE</h4>
				        
				        <h5 class="ms-layer video-title video-sub-title" style="left:240px; top:90px "
				        	data-effect="right(50)"
				        	data-duration="3500"
				        	data-ease="easeOutExpo"
				        	data-delay="1000"
				        >Groundbreaking footage of the world’s fastest runner</h5>

				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/style/blank.gif" data-src="img/5.jpg" alt="lorem ipsum dolor sit"/>  
				          <img src="img/thumbs/5.jpg" alt="thumb-5" class="ms-thumb"/>
				         <div class="ms-info">
				        	CONSECTETUR ADIPISCING ELIT
				        </div>       
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/style/blank.gif" data-src="img/6.jpg" alt="lorem ipsum dolor sit"/>    
				          <img src="img/thumbs/6.jpg" alt="thumb-6" class="ms-thumb"/>
				         <div class="ms-info">
				        	SED A SEM AT LIBERO SODALES
				        </div>
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/style/blank.gif" data-src="img/7.jpg" alt="lorem ipsum dolor sit"/>  
				          <img src="img/thumbs/7.jpg" alt="thumb-7" class="ms-thumb"/>
				         <div class="ms-info">
				        	AT LACUS SED RUTRUM
				        </div>
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/style/blank.gif" data-src="img/8.jpg" alt="lorem ipsum dolor sit"/>  
				          <img src="img/thumbs/8.jpg" alt="thumb-8" class="ms-thumb"/>
				         <div class="ms-info">
				        	VITAE ULTRICIES ALIQUET
				        </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.setup('masterslider' , {
			width:1000,
			height:500,
			space:10,
			preload:3,
			view:'basic'
		});
		slider.control('arrows');	
		
		var gallery = new MSGallery('ms-gallery-1' , slider);
		gallery.setup();
		
	</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/black-2/style.css" rel='stylesheet' type='text/css'>
		 
		<!-- MasterSlider Template Style -->
		<link href='style/ms-gallery-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>