lorem ipsum dolor sit

GREEN T-SHIRT

/
$7
Medium Size
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid
BUY

LOREM IPSUM DOLOR

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

LOREM IPSUM DOLOR

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

LOREM IPSUM DOLOR

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

YELLOW T-SHIRT

/
$9
Medium Size
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid
BUY

LOREM IPSUM DOLOR

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

LOREM IPSUM DOLOR

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

LOREM IPSUM DOLOR

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

ORANGE T-SHIRT

/
$8
Medium Size
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid
BUY

LOREM IPSUM DOLOR

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

LOREM IPSUM DOLOR

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

LOREM IPSUM DOLOR

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

RED T-SHIRT

/
$8
Medium Size
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid
BUY

LOREM IPSUM DOLOR

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

LOREM IPSUM DOLOR

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

LOREM IPSUM DOLOR

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

BLUE T-SHIRT

/
$8
Medium Size
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid
BUY

LOREM IPSUM DOLOR

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

LOREM IPSUM DOLOR

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

LOREM IPSUM DOLOR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
You need to put the following html markup in your html document where you want to have slider
	<!-- template -->
	<div class="ms-showcase1">
				<!-- masterslider -->
				<div class="master-slider ms-skin-light-6 round-skin" id="masterslider">
				    <div class="ms-slide t-green">
				        <img src="../masterslider/blank.gif" data-src="img/1.png" alt="lorem ipsum dolor sit"/> 
				         
				        <h4  class="ms-layer product-title"	style="left:637px; top:270px;" 
				        	data-effect="left(100)"
				        	data-delay="0"
				        	data-ease="easeOutQuad"
				        >GREEN T-SHIRT</h4>
				        
				        <div class="ms-layer product-title slash" style="left:834px; top:270px;" 
				        	data-effect="left(20)"
				        	data-delay="100"
				        	data-ease="easeOutQuad"
				        >/</div>
				       	<div class="ms-layer product-price" style="left:849px; top:270px;"
				       		data-effect="right(20)"
				       		data-delay="400"
				       		data-ease="easeOutQuad"
				       	>$7</div>
				        <div class="ms-layer product-size" 	style="left:637px; top:310px;"
				        	data-effect="right(20)"
				        	data-delay="600"
				        	data-ease="easeOutExpo"
				        >Medium Size</div>
				        <div class="ms-layer product-desc" 	style="left:637px; top:335px;"
				        	data-effect="bottom(40)"
				        	data-delay="500"
				        	data-ease="easeInOutQuad"
				        >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid</div>
				        
						<div class="ms-layer buy-btn" style="left:637px; top:385px;"
							data-effect="bottom(40)"
				        	data-delay="900"
				        	data-ease="easeInOutQuad">
							<a href="#" title="buy">BUY</a>
						</div>
						 <div class="ms-layer"	style="left:418px; top:335px;"
				        	data-delay="300"
				        	data-type="hotspot"
				        	data-align="left"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:664px; top:208px;"
				        	data-delay="400"
				        	data-type="hotspot"
				        	data-align="right"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:375px; top:115px;"
				        	data-delay="500"
				        	data-type="hotspot"
				        	data-align="bottom"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
				        
				    </div>
				    <div class="ms-slide t-yellow">
				        <img src="../masterslider/blank.gif" data-src="img/2.png" alt="lorem ipsum dolor sit"/>     
				        
				        <h4  class="ms-layer product-title"	style="left:637px; top:270px;" 
				        	data-effect="left(100)"
				        	data-delay="0"
				        	data-ease="easeOutQuad"
				        >YELLOW T-SHIRT</h4>
				        
				        <div class="ms-layer product-title slash" style="left:853px; top:270px;" 
				        	data-effect="left(20)"
				        	data-delay="100"
				        	data-ease="easeOutQuad"
				        >/</div>
				       	<div class="ms-layer product-price" style="left:867px; top:270px;"
				       		data-effect="right(20)"
				       		data-delay="400"
				       		data-ease="easeOutQuad"
				       	>$9</div>
				        <div class="ms-layer product-size" 	style="left:637px; top:310px;"
				        	data-effect="right(20)"
				        	data-delay="600"
				        	data-ease="easeOutExpo"
				        >Medium Size</div>
				        <div class="ms-layer product-desc" 	style="left:637px; top:335px;"
				        	data-effect="bottom(40)"
				        	data-delay="500"
				        	data-ease="easeInOutQuad"
				        >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid</div>
				        
						<div class="ms-layer buy-btn" style="left:637px; top:385px;"
							data-effect="bottom(40)"
				        	data-delay="900"
				        	data-ease="easeInOutQuad">
							<a href="#" title="buy">BUY</a>
						</div>
						
						 <div class="ms-layer"	style="left:418px; top:335px;"
				        	data-delay="300"
				        	data-type="hotspot"
				        	data-align="left"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:664px; top:208px;"
				        	data-delay="400"
				        	data-type="hotspot"
				        	data-align="right"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:375px; top:115px;"
				        	data-delay="500"
				        	data-type="hotspot"
				        	data-align="bottom"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
				    </div>
				    <div class="ms-slide t-orange">
				        <img src="../masterslider/blank.gif" data-src="img/3.png" alt="lorem ipsum dolor sit"/>    
				      
				           <h4  class="ms-layer product-title"	style="left:637px; top:270px;" 
				        	data-effect="left(100)"
				        	data-delay="0"
				        	data-ease="easeOutQuad"
				        >ORANGE T-SHIRT</h4>
				        
				        <div class="ms-layer product-title slash" style="left:855px; top:270px;" 
				        	data-effect="left(20)"
				        	data-delay="100"
				        	data-ease="easeOutQuad"
				        >/</div>
				       	<div class="ms-layer product-price" style="left:868px; top:270px;"
				       		data-effect="right(20)"
				       		data-delay="400"
				       		data-ease="easeOutQuad"
				       	>$8</div>
				        <div class="ms-layer product-size" 	style="left:637px; top:310px;"
				        	data-effect="right(20)"
				        	data-delay="600"
				        	data-ease="easeOutExpo"
				        >Medium Size</div>
				        <div class="ms-layer product-desc" 	style="left:637px; top:335px;"
				        	data-effect="bottom(40)"
				        	data-delay="500"
				        	data-ease="easeInOutQuad"
				        >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid</div>
				        
						<div class="ms-layer buy-btn" style="left:637px; top:385px;"
							data-effect="bottom(40)"
				        	data-delay="900"
				        	data-ease="easeInOutQuad">
							<a href="#" title="buy">BUY</a>
						</div>
						
						  <div class="ms-layer"	style="left:418px; top:335px;"
				        	data-delay="300"
				        	data-type="hotspot"
				        	data-align="left"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:664px; top:208px;"
				        	data-delay="400"
				        	data-type="hotspot"
				        	data-align="right"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:375px; top:115px;"
				        	data-delay="500"
				        	data-type="hotspot"
				        	data-align="bottom"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
				    </div>
				    <div class="ms-slide t-red">
				        <img src="../masterslider/blank.gif" data-src="img/4.png" alt="lorem ipsum dolor sit"/>    
				        
				        <h4  class="ms-layer product-title"	style="left:637px; top:270px;" 
				        	data-effect="left(100)"
				        	data-delay="0"
				        	data-ease="easeOutQuad"
				        >RED T-SHIRT</h4>
				        
				        <div class="ms-layer product-title slash" style="left:799px; top:270px;" 
				        	data-effect="left(20)"
				        	data-delay="100"
				        	data-ease="easeOutQuad"
				        >/</div>
				       	<div class="ms-layer product-price" style="left:811px; top:270px;"
				       		data-effect="right(20)"
				       		data-delay="400"
				       		data-ease="easeOutQuad"
				       	>$8</div>
				        <div class="ms-layer product-size" 	style="left:637px; top:310px;"
				        	data-effect="right(20)"
				        	data-delay="600"
				        	data-ease="easeOutExpo"
				        >Medium Size</div>
				        <div class="ms-layer product-desc" 	style="left:637px; top:335px;"
				        	data-effect="bottom(40)"
				        	data-delay="500"
				        	data-ease="easeInOutQuad"
				        >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid</div>
				        
						<div class="ms-layer buy-btn" style="left:637px; top:385px;"
							data-effect="bottom(40)"
				        	data-delay="900"
				        	data-ease="easeInOutQuad">
							<a href="#" title="buy">BUY</a>
						</div>
						
						 <div class="ms-layer"	style="left:418px; top:335px;"
				        	data-delay="300"
				        	data-type="hotspot"
				        	data-align="left"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:664px; top:208px;"
				        	data-delay="400"
				        	data-type="hotspot"
				        	data-align="right"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:375px; top:115px;"
				        	data-delay="500"
				        	data-type="hotspot"
				        	data-align="bottom"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
				    </div>
				    <div class="ms-slide t-blue">
				        <img src="../masterslider/blank.gif" data-src="img/5.png" alt="lorem ipsum dolor sit"/>  
				         <h4  class="ms-layer product-title"	style="left:637px; top:270px;" 
				        	data-effect="left(100)"
				        	data-delay="0"
				        	data-ease="easeOutQuad"
				        >BLUE T-SHIRT</h4>
				        
				        <div class="ms-layer product-title slash" style="left:809px; top:270px;" 
				        	data-effect="left(20)"
				        	data-delay="100"
				        	data-ease="easeOutQuad"
				        >/</div>
				       	<div class="ms-layer product-price" style="left:822px; top:270px;"
				       		data-effect="right(20)"
				       		data-delay="400"
				       		data-ease="easeOutQuad"
				       	>$8</div>
				        <div class="ms-layer product-size" 	style="left:637px; top:310px;"
				        	data-effect="right(20)"
				        	data-delay="600"
				        	data-ease="easeOutExpo"
				        >Medium Size</div>
				        <div class="ms-layer product-desc" 	style="left:637px; top:335px;"
				        	data-effect="bottom(40)"
				        	data-delay="500"
				        	data-ease="easeInOutQuad"
				        >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid</div>
				        
						<div class="ms-layer buy-btn" style="left:637px; top:385px;"
							data-effect="bottom(40)"
				        	data-delay="900"
				        	data-ease="easeInOutQuad">
							<a href="#" title="buy">BUY</a>
						</div>
						
						 <div class="ms-layer"	style="left:418px; top:335px;"
				        	data-delay="300"
				        	data-type="hotspot"
				        	data-align="left"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:664px; top:208px;"
				        	data-delay="400"
				        	data-type="hotspot"
				        	data-align="right"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</div>
						
						 <div class="ms-layer" style="left:375px; top:115px;"
				        	data-delay="500"
				        	data-type="hotspot"
				        	data-align="bottom"
				        >
					    	<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
						</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:1024 ,
			height:580,
			space:0,
			fillMode:'fit',
			speed:25,
			preload:'all',
			view:'flow',
			loop:true
		});
		
		slider.control('arrows');	
		slider.control('bullets');
	</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/light-6/style.css" rel='stylesheet' type='text/css'>
		 
		<!-- MasterSlider Template Style -->
		<link href='style/ms-showcase1.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>