lorem ipsum dolor sit
video thumb

Red Bull Signature Series 2013

Red Bull Signature Series 2013

by Vogner

lorem ipsum dolor sit
video thumb

A Good Year for Extreme Sports

A Good Year for Extreme Sports

by Family Creative

lorem ipsum dolor sit
video thumb

Where things come from

Where things come from

by Hardy Seiler

lorem ipsum dolor sit
video thumb

RENAN OZTURK // REEL 2013

RENAN OZTURK // REEL 2013

by Camp 4 Collective

lorem ipsum dolor sit
video thumb

Buenos Aires Ciudad

Buenos Aires Ciudad

by Esteban Diácono

lorem ipsum dolor sit
video thumb

DRAWNIMAL

DRAWNIMAL

by Lucas Zanotto

lorem ipsum dolor sit
video thumb

Lamborghini "Aventador"

Lamborghini "Aventador"

by Sehsucht

You need to put the following html markup in your html document where you want to have slider
		<!-- template -->
		<div class="ms-videogallery-template  ms-videogallery-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">
						<img src="img/thumbs/1.jpg" alt="video thumb"  />
						<h3>Red Bull Signature Series 2013</h3>
					</div>
					<h3 class="ms-layer video-title" style="right:41px; bottom:40px; background-color:#313D50;" data-effect="rotateback(20,620,br)" data-ease="easeOutQuad" data-delay="100">Red Bull Signature Series 2013</h3>
					<h4 class="ms-layer video-author" style="right:285px; bottom:14px; background-color:#86838B; color:#FFF;" data-effect="rotate3dbottom(95,0,0,100)" data-ease="easeOutExpo" data-duration="1400" data-delay="500"> by Vogner</h4>
					<a data-type="video" href="http://player.vimeo.com/video/17411241"> </a>
				</div>
				<div class="ms-slide">
					<img src="../masterslider/blank.gif" data-src="img/2.jpg" alt="lorem ipsum dolor sit"/>
					<div class="ms-thumb">
						<img src="img/thumbs/2.jpg" alt="video thumb"  />
						<h3>A Good Year for Extreme Sports</h3>
					</div>
					<h3 class="ms-layer video-title" style="right:53px; bottom:99px; background-color:#899798;" data-effect="rotatefront(20,620,br)" data-ease="easeOutQuad" data-delay="100">A Good Year for Extreme Sports</h3>
					<h4 class="ms-layer video-author" style="right:267px; bottom:75px; background-color:#595247; color:#fff;" data-effect="rotate3dbottom(95,0,0,100)" data-ease="easeOutExpo" data-duration="1400" data-delay="500">by Family Creative</h4>
					<a data-type="video" href="http://player.vimeo.com/video/5967029"> </a>
				</div>
				<div class="ms-slide">
					<img src="../masterslider/blank.gif" data-src="img/3.jpg" alt="lorem ipsum dolor sit"/>
					<div class="ms-thumb">
						<img src="img/thumbs/3.jpg" alt="video thumb"  />
						<h3>Where things come from</h3>
					</div>
					<h3 class="ms-layer video-title" style="left:51px; bottom:101px; background-color:#333;" data-effect="rotateback(20,620,br)" data-ease="easeOutQuad" data-delay="100">Where things come from</h3>
					<h4 class="ms-layer video-author" style="left:51px; bottom:76px" data-effect="rotate3dbottom(95,0,0,100)" data-ease="easeOutExpo" data-duration="1400" data-delay="500">by Hardy Seiler</h4>
					<a data-type="video" href="http://player.vimeo.com/video/9152451"> </a>
				</div>
				<div class="ms-slide">
					<img src="../masterslider/blank.gif" data-src="img/4.jpg" alt="lorem ipsum dolor sit"/>
					<div class="ms-thumb">
						<img src="img/thumbs/4.jpg" alt="video thumb"  />
						<h3>RENAN OZTURK // REEL 2013</h3>
					</div>
					<h3 class="ms-layer video-title" style="left:70px; bottom:140px; background: #6D6F6E; " data-effect="rotatebottom(20,20,br)" data-ease="easeOutQuad" data-delay="100">RENAN OZTURK // REEL 2013</h3>
					<h4 class="ms-layer video-author" style="left:70px; bottom:115px; background-color:#A09996; color:#FFF;" data-effect="rotate3dbottom(95,0,0,100)" data-ease="easeOutExpo" data-duration="1400" data-delay="500">by Camp 4 Collective</h4>
					<a data-type="video" href="http://player.vimeo.com/video/12849638"> </a>
				</div>
				<div class="ms-slide">
					<img src="../masterslider/blank.gif" data-src="img/5.jpg" alt="lorem ipsum dolor sit"/>
					<div class="ms-thumb">
						<img src="img/thumbs/5.jpg" alt="video thumb"  />
						<h3>Buenos Aires Ciudad </h3>
					</div>
					<h3 class="ms-layer video-title"  style="right: 48px; bottom:49px; background-color: #23354E;"  data-effect="rotateleft(20,120,br)" data-ease="easeOutQuad" data-delay="100">Buenos Aires Ciudad</h3>
					<h4 class="ms-layer video-author" style="right: 136px; bottom:24px" data-effect="rotate3dbottom(95,0,0,100)" data-ease="easeOutExpo" data-duration="1400" data-delay="500">by Esteban Diácono</h4>
					<a data-type="video" href="http://player.vimeo.com/video/15630517"> </a>
				</div>
				<div class="ms-slide">
					<img src="../masterslider/blank.gif" data-src="img/6.jpg" alt="lorem ipsum dolor sit"/>
					<div class="ms-thumb">
						<img src="img/thumbs/6.jpg" alt="video thumb"  />
						<h3>DRAWNIMAL</h3>
					</div>
					<h3 class="ms-layer video-title" style="left: 81px; bottom:86px; color:#000; background-color:#FFF;" data-effect="rotatefront(20,620,br)" data-ease="easeOutQuad" data-delay="100">DRAWNIMAL</h3>
					<h4 class="ms-layer video-author" style="left:81px; bottom:61px; color:#fff; background-color: #D08E82; padding:4px 16px;" data-effect="rotate3dbottom(95,0,0,100)" data-ease="easeOutExpo" data-duration="1400" data-delay="500">by Lucas Zanotto</h4>
					<a data-type="video" href="http://player.vimeo.com/video/32796535"> </a>
				</div>
				<div class="ms-slide">
					<img src="../masterslider/blank.gif" data-src="img/7.jpg" alt="lorem ipsum dolor sit"/>
					<div class="ms-thumb">
						<img src="img/thumbs/7.jpg" alt="video thumb"  />
						<h3>Lamborghini "Aventador"</h3>
					</div>
					<h3 class="ms-layer video-title" style="left: 41px; top:10px; background-color: #813123;" data-effect="rotateback(20,620,br)" data-ease="easeOutQuad" data-delay="100">Lamborghini "Aventador"</h3>
					<h4 class="ms-layer video-author" style="left:41px; top:55px; background-color: #696353; color:#fff; " data-effect="rotate3dbottom(95,0,0,100)" data-ease="easeOutExpo" data-duration="1400" data-delay="500">by Sehsucht</h4>
					<a data-type="video" href="http://player.vimeo.com/video/31484170"> </a>
				</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 : 850,
			height : 478,
			space : 5,
			shuffle : true,
			loop : true,
			view : 'mask'
		});
		
		slider.control('arrows');
		slider.control('thumblist', {autohide : false,	dir : 'v'});
		
	</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-videogallery.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>