ELASTIC SLIDER

CSS
<link href="assets/plugins/slider.nivo/nivo-slider.css" rel="stylesheet" type="text/css" />


JAVASCRIPT
<script type="text/javascript" src="assets/plugins/slider.nivo/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="assets/js/view/demo.nivo_slider.js"></script>
		
		
HTML
<!-- ELASTIC SLIDER -->
<div id="ei-slider" class="ei-slider" data-tumbwidth="100">

	<ul class="ei-slider-large m-0">

		<!-- Slide 1 -->
		<li>
			<img src="demo_files/images/1200x800/7-min.jpg" alt="image01" />
			<div class="ei-title">
				<h2>Creative</h2>
				<h3>Duet</h3>
			</div>
		</li>

		<!-- Slide 2 -->
		<li>
			<img src="demo_files/images/1200x800/8-min.jpg" alt="image02" />
			<div class="ei-title">
				<h2>Friendly</h2>
				<h3>Devil</h3>
			</div>
		</li>

		<!-- Slide 3 -->
		<li>
			<img src="demo_files/images/1200x800/9-min.jpg" alt="image03"/>
			<div class="ei-title">
				<h2>Tranquilent</h2>
				<h3>Compatriot</h3>
			</div>
		</li>

		<!-- Slide 4 -->
		<li>
			<img src="demo_files/images/1200x800/10-min.jpg" alt="image04"/>
			<div class="ei-title">
				<h2>Insecure</h2>
				<h3>Hussler</h3>
			</div>
		</li>

		<!-- Slide 5 -->
		<li>
			<img src="demo_files/images/1200x800/11-min.jpg" alt="image05"/>
			<div class="ei-title">
				<h2>Loving</h2>
				<h3>Rebel</h3>
			</div>
		</li>

		<!-- Slide 6 -->
		<li>
			<img src="demo_files/images/1200x800/12-min.jpg" alt="image06"/>
			<div class="ei-title">
				<h2>Passionate</h2>
				<h3>Seeker</h3>
			</div>
		</li>

		<!-- Slide 7 -->
		<li>
			<img src="demo_files/images/1200x800/13-min.jpg" alt="image07"/>
			<div class="ei-title">
				<h2>Crazy</h2>
				<h3>Friend</h3>
			</div>
		</li>

	</ul>

	<!-- Thumbnails -->
	<ul class="ei-slider-thumbs">
		<li class="ei-slider-element">Current</li>
		<li><a href="#">Slide 1</a><img src="demo_files/images/150x99/7-min.jpg" alt="thumb01" /></li>
		<li><a href="#">Slide 2</a><img src="demo_files/images/150x99/8-min.jpg" alt="thumb02" /></li>
		<li><a href="#">Slide 3</a><img src="demo_files/images/150x99/9-min.jpg" alt="thumb03" /></li>
		<li><a href="#">Slide 4</a><img src="demo_files/images/150x99/10-min.jpg" alt="thumb04" /></li>
		<li><a href="#">Slide 5</a><img src="demo_files/images/150x99/11-min.jpg" alt="thumb05" /></li>
		<li><a href="#">Slide 6</a><img src="demo_files/images/150x99/12-min.jpg" alt="thumb06" /></li>
		<li><a href="#">Slide 7</a><img src="demo_files/images/150x99/13-min.jpg" alt="thumb07" /></li>
	</ul>
	<!-- /Thumbnails -->

</div>
<!-- /ELASTIC SLIDER -->