lorem ipsum dolor sit

SAMPLE TITLE

Lorem ipsum dolor sit amet, consectetuer elit

lorem ipsum dolor sit

SAMPLE TITLE

Lorem ipsum dolor sit amet, consectetuer elit

lorem ipsum dolor sit

SAMPLE TITLE

Lorem ipsum dolor sit amet, consectetuer elit

lorem ipsum dolor sit

SAMPLE TITLE

Lorem ipsum dolor sit amet, consectetuer elit

lorem ipsum dolor sit vimeo video

SAMPLE TITLE

Lorem ipsum dolor sit amet, consectetuer elit

DIRECTOR’S CUT

CHEETAHS ON THE EDGE

Groundbreaking footage of the world’s fastest runner
lorem ipsum dolor sit vimeo video

SAMPLE TITLE

Lorem ipsum dolor sit amet, consectetuer elit

lorem ipsum dolor sit

SAMPLE TITLE

Lorem ipsum dolor sit amet, consectetuer elit

lorem ipsum dolor sit

SAMPLE TITLE

Lorem ipsum dolor sit amet, consectetuer elit

lorem ipsum dolor sit

SAMPLE TITLE

Lorem ipsum dolor sit amet, consectetuer elit

You need to put the following html markup in your html document where you want to have slider
	<!-- template -->
	<div class="ms-tabs-template ms-tabs-vertical-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"/>  
				        <div class="ms-thumb">
				        	<h3>SAMPLE TITLE</h3>
				        	<p>Lorem ipsum dolor sit amet, consectetuer elit</p>
				        </div>
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/blank.gif" data-src="img/2.jpg" alt="lorem ipsum dolor sit"/>     
				         <div class="ms-thumb">
				        	<h3>SAMPLE TITLE</h3>
				        	<p>Lorem ipsum dolor sit amet, consectetuer elit</p>
				        </div>
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/blank.gif" data-src="img/3.jpg" alt="lorem ipsum dolor sit"/>    
				         <div class="ms-thumb">
				        	<h3>SAMPLE TITLE</h3>
				        	<p>Lorem ipsum dolor sit amet, consectetuer elit</p>
				        </div>   
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/blank.gif" data-src="img/4.jpg" alt="lorem ipsum dolor sit"/>    
				         <div class="ms-thumb">
				        	<h3>SAMPLE TITLE</h3>
				        	<p>Lorem ipsum dolor sit amet, consectetuer elit</p>
				        </div>  
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/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-thumb">
				        	<h3>SAMPLE TITLE</h3>
				        	<p>Lorem ipsum dolor sit amet, consectetuer elit</p>
				        </div>  
				        <h5 class="ms-layer video-title video-top-title" style="left:183px; 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:180px; 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:180px; 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/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-thumb">
				        	<h3>SAMPLE TITLE</h3>
				        	<p>Lorem ipsum dolor sit amet, consectetuer elit</p>
				        </div>  
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/blank.gif" data-src="img/5.jpg" alt="lorem ipsum dolor sit"/>  
				         <div class="ms-thumb">
				        	<h3>SAMPLE TITLE</h3>
				        	<p>Lorem ipsum dolor sit amet, consectetuer elit</p>
				        </div>       
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/blank.gif" data-src="img/6.jpg" alt="lorem ipsum dolor sit"/>    
				         <div class="ms-thumb">
				        	<h3>SAMPLE TITLE</h3>
				        	<p>Lorem ipsum dolor sit amet, consectetuer elit</p>
				        </div>
				    </div>
				    <div class="ms-slide">
				        <img src="../masterslider/blank.gif" data-src="img/7.jpg" alt="lorem ipsum dolor sit"/>  
				         <div class="ms-thumb">
				        	<h3>SAMPLE TITLE</h3>
				        	<p>Lorem ipsum dolor sit amet, consectetuer elit</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('circletimer' , {color:"#FFFFFF" , stroke:9});
		slider.control('thumblist' , {autohide:false ,dir:'v',type:'tabs', align:'right', margin:-12, space:0, width:229, height:100, hideUnder:550});

		slider.setup('masterslider' , {
			width:860,
			height:430,
			space:0,
			view:'wave'
		});
		
	</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-tabs-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-1.10.2.min.js"></script>
		<script src="../masterslider/jquery.easing.min.js"></script>
		
		<!-- Master Slider -->
		<script src="../masterslider/masterslider.min.js"></script>