Master Slider Gallery Template

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/style/blank.gif" data-src="img/bg.jpg" alt="lorem ipsum dolor sit"/> 
				        
				        <img src="../masterslider/style/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/style/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/style/blank.gif" data-src="img/bg2.jpg" alt="lorem ipsum dolor sit"/>  
				            
				        <img src="../masterslider/style/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/style/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/style/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/style/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/style/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/style/blank.gif" data-src="img/bg3.jpg" alt="lorem ipsum dolor sit"/>      
				      	
				       <img src="../masterslider/style/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/style/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/style/blank.gif" data-src="img/bg4.jpg" alt="lorem ipsum dolor sit"/>    
				        
				        <img src="../masterslider/style/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/style/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/style/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.min.js"></script>
		<script src="../masterslider/jquery.easing.min.js"></script>
		
		<!-- Master Slider -->
		<script src="../masterslider/masterslider.min.js"></script>