lorem ipsum dolor sit layer

LOREM IPSUM

DOLOR SIT AMET

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.

layer
lorem ipsum dolor sit layer layer layer layer

LOREM IPSUM

CONSECTETUER ADIPISCING

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.

layer
lorem ipsum dolor sit layer
lorem ipsum dolor sit

REDBULL

SIGNATURE

CONSECTETUER ADIPISCING

Youtube, Vimeo and custom iFrame supported

lorem ipsum dolor sit layer layer

LOREM IPSUM

CONSECTETUER ADIPISCING

lorem ipsum dolor sit REDBULL

REDBULL

SIGNATURE

CONSECTETUER ADIPISCING

You need to put the following html markup in your html document where you want to have slider
			<!-- template -->
			<div class="ms-layers-template">
				<!-- masterslider -->
				<div class="master-slider ms-skin-black-2 round-skin" id="masterslider">
				    <div class="ms-slide slide-1" style="z-index: 10">
				        <img src="../masterslider/blank.gif" data-src="img/bg.jpg" alt="lorem ipsum dolor sit"/> 
				        
				        <img src="../masterslider/blank.gif" data-src="img/bm.png" alt="layer" class="ms-layer"
				        	style="bottom:0; left:100px"
				        	data-effect="left(40)"
				        	data-type="image"
				        />
				        
				        <div class="ms-layer text-box" style="left:514px; top:184px "
				        	data-effect="rotatebottom(40,250,c)"
				        	data-duration="3500"
				        	data-delay="900"
				        	data-ease="easeOutExpo"
				        > </div>
				        
				        <h3 class="ms-layer bold-title"  style="left:535px; top:204px" 
				       		data-effect="right(250)"
				        	data-duration="3500"
				        	data-delay="1500"
				        	data-ease="easeOutExpo"
				        >LOREM IPSUM</h3>
				        
				        <h3 class="ms-layer light-title" style="left:532px; top:235px" 
				        	data-effect="left(short)"
				        	data-duration="3500"
				        	data-delay="2100"
				        	data-ease="easeOutExpo"
				        >DOLOR SIT AMET</h3>
				        
				        <p class="ms-layer normal-desc"  style="left:535px; top:287px" 
				        	data-effect="bottom(40)"
				        	data-duration="3500"
				        	data-delay="3000"
				        	data-ease="easeOutExpo"
				        >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
				        
				        <img src="../masterslider/blank.gif" data-src="img/btn.gif" alt="layer" class="ms-layer"
				        	style="left:535px; top:338px"
				        	data-effect="rotateright(20,120,br)"
				        	data-duration="3500"
				        	data-delay="3600"
				        	data-ease="easeOutExpo"
				        	data-type="image"
				        />
				    </div>
				    <div class="ms-slide slide-2" style="z-index: 11">
				        <img src="../masterslider/blank.gif" data-src="img/bg2.jpg" alt="lorem ipsum dolor sit"/>  
				            
				        <img src="../masterslider/blank.gif" data-src="img/pat1.gif" alt="layer" class="ms-layer"
				        	style="top:95px; left:320px"
				        	data-effect="bottom(short)"
				        	data-duration="2000"
				        	data-ease="easeOutQuad"
				        	data-type="image"
				        />
				        <img src="../masterslider/blank.gif" data-src="img/pat2.gif" alt="layer" class="ms-layer"
				        	style="top:62px; left:357px"
				        	data-effect="bottom(short)"
				        	data-duration="2000"
				        	data-delay="300"
				        	data-ease="easeOutQuad"
				        	data-type="image"
				        />
				        <img src="../masterslider/blank.gif" data-src="img/pat3.gif" alt="layer" class="ms-layer"
				        	style="top:128px; left:596px"
				        	data-effect="bottom(short)"
				        	data-duration="2000"
				        	data-delay="600"
				        	data-ease="easeOutQuad"
				        	data-type="image"
				        />
				        <img src="../masterslider/blank.gif" data-src="img/pat4.gif" alt="layer" class="ms-layer"
				        	style="top:97px; left:590px"
				        	data-effect="bottom(short)"
				        	data-duration="2000"
				        	data-delay="900"
				        	data-ease="easeOutQuad"
				        	data-type="image"
				        />

				        <h3 class="ms-layer light-title"  style="left:570px; top:317px"
				        	data-effect="skewleft(18,200,c)"
				        	data-duration="3000"
				        	data-delay="1200"
				        	data-ease="easeOutExpo" 
				        >LOREM IPSUM</h3>
				        
				        <h3 class="ms-layer normal-title"  style="left:570px; top:385px" 
				        	data-effect="right(150)"
				        	data-duration="2000"
				        	data-delay="1500"
				        	data-ease="easeOutExpo"
				        >CONSECTETUER ADIPISCING</h3>
				        
				        <p class="ms-layer normal-desc"  style="left:570px; top:405px" 
				       		data-effect="rotatebottom(40,250,c)"
				        	data-duration="2000"
				        	data-delay="1900"
				        	data-ease="easeOutExpo"
				        >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
				        
				         <img src="../masterslider/blank.gif" data-src="img/ipad.png" alt="layer" class="ms-layer"
				        	style="top:94px; left:50px"
				        	data-effect="rotateleft(10,100,bl)"
				        	data-duration="4300"
				        	data-delay="500"
				        	data-ease="easeOutExpo"
				        	data-type="image"
				        />
				    </div>
				    <div class="ms-slide slide-3" style="z-index: 12">
				       
				       <img src="../masterslider/blank.gif" data-src="img/bg3.jpg" alt="lorem ipsum dolor sit"/>      
				      	
				       <img src="../masterslider/blank.gif" data-src="img/shadow.png" alt="layer" class="ms-layer"
				        	style="bottom:100px; right:-125px"
				        	data-effect="rotate3dright(0,30,0,100,r)"
				        	data-duration="2500"
				        	data-ease="easeOutQuad"
				        	data-type="image"
				        />
				        
				        <div class="ms-layer video-box" style="bottom:133px; right:10px; width:660px; height:374px"
				       		data-type="video"
				      		data-effect="rotate3dright(0,30,0,100,r)"
				        	data-duration="2500"
				        	data-ease="easeOutQuad"
				       >
				       	<img src="../masterslider/blank.gif" data-src="img/video-cover-s.jpg" alt="lorem ipsum dolor sit"/>
				       	<iframe src="http://player.vimeo.com/video/58226214" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe>
				       </div>
				       
				       <h3 class="ms-layer light-title"  style="left:10px; top:197px"
				       		data-effect="bottom(20)"
				        	data-duration="2300"
				        	data-delay="2300"
				        	data-ease="easeOutExpo"
				       >REDBULL</h3>
				        
				       <h3 class="ms-layer bold-title"  style="left:10px; top:242px"
				       		data-effect="left(100)"
				        	data-duration="3300"
				        	data-delay="1900"
				        	data-ease="easeOutExpo"
				       >SIGNATURE</h3>
				       
				       <h3 class="ms-layer normal-title"  style="left:10px; top:312px"
				       		data-effect="bottom(20)"
				        	data-duration="2300"
				        	data-delay="2000"
				        	data-ease="easeOutExpo"
				       >CONSECTETUER ADIPISCING</h3>
				       
				       <p class="ms-layer normal-desc"  style="left:10px; top:330px"
				       		data-effect="right(40)"
				        	data-duration="2300"
				        	data-delay="2300"
				        	data-ease="easeOutExpo"
				       >Youtube, Vimeo and custom iFrame supported</p>
				        
				      
				        
				    </div>
				    				    
				    <div class="ms-slide slide-4" style="z-index: 13">
				    	
				    	<img src="../masterslider/blank.gif" data-src="img/bg4.jpg" alt="lorem ipsum dolor sit"/>    
				        
				        <img src="../masterslider/blank.gif" data-src="img/shadow-s.png" alt="layer" class="ms-layer"
				        	style="bottom:80px; left:-5px"
				        	data-effect="fade"
				        	data-duration="2000"
				        	data-ease="easeOutExpo"
				        	data-type="image"
				        />

				        <img src="../masterslider/blank.gif" data-src="img/imac.png" alt="layer" class="ms-layer"
				        	style="bottom:105px; left:40px"
				        	data-effect="top(100)"
				        	data-duration="2000"
				        	data-ease="easeOutExpo"
				        	data-type="image"
				        />
				        
						 <h3 class="ms-layer light-title"  style="left:588px; top:250px" 
							data-effect="right(40)"
				        	data-duration="2300"
				        	data-delay="1300"
				        	data-ease="easeOutExpo"
						 >LOREM IPSUM</h3>
						 
				        <h3 class="ms-layer normal-title"  style="left:590px; top:325px" 
				        	data-effect="left(40)"
				        	data-duration="2300"
				        	data-delay="1400"
				        	data-ease="easeOutBack"
				        >CONSECTETUER ADIPISCING</h3>
				    </div>
				    <div class="ms-slide slide-5" style="z-index: 14">
				        <img src="../masterslider/blank.gif" data-src="img/bg5.jpg" alt="lorem ipsum dolor sit"/>   
				        <a href="http://player.vimeo.com/video/58226214" data-type="video">REDBULL</a>

						<div class="ms-layer text-box" style="left:240px; bottom:69px "
							data-effect="rotatebottom(-40,250,c)"
				        	data-duration="2300"
				        	data-delay="100"
				        	data-ease="easeOutExpo"
						> </div>
						
						<h3 class="ms-layer light-title"  style="left:270px; bottom:118px" 
							data-effect="left(40)"
				        	data-duration="2000"
				        	data-delay="1000"
				        	data-ease="easeOutExpo"
						>REDBULL</h3>
						
				        <h3 class="ms-layer bold-title"  style="left:485px; bottom:118px" 
				        	data-effect="left(40)"
				        	data-duration="2000"
				        	data-delay="1100"
				        	data-ease="easeOutExpo"
				        >SIGNATURE</h3>
				        
				        <h3 class="ms-layer normal-title"  style="left:400px; bottom:89px" 
				     	   data-effect="skewright(15,40)"
				        	data-duration="2300"
				        	data-delay="1400"
				        	data-ease="easeOutExpo"
				        >CONSECTETUER ADIPISCING</h3> 
				       
				    </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:1024,
			height:580,
			//space:100,
			fullwidth:true,
			centerControls:false,
			speed:18,
			view:'flow'
		});
		//slider.control('arrows');	
		slider.control('bullets' ,{autohide:false});	
		
	</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-layers-style.css' rel='stylesheet' type='text/css'>
		
		<!-- google font Lato -->
		<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' 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>