ELASTIC SLIDER

CSS

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





JAVASCRIPT

<script src="assets/plugins/slider.nivo/jquery.nivo.slider.pack.js"></script>

<script 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 -->