FLEX SLIDER

HTML

<!--

	data-controlNav="thumbnails" 	- thumbnails navigation

	data-controlNav="true" 		- arrows navigation

	data-controlNav="false"		- no navigation

	data-arrowNav="false"		- no arrows navigation

	data-slideshowSpeed="7000"	- slideshow speed

	data-pauseOnHover="true"	- pause on mouse over

-->

<div class="flexslider" data-controlNav="thumbnails">

	<ul class="slides">

	

		<!-- Slide 1 -->

		<li data-thumb="demo_files/images/150x99/10-min.jpg">

			<a href="#">

				<img src="demo_files/images/content_slider/10-min.jpg" alt="Slide 2">

				<div class="flex-caption">Flexslider Caption #1</div>

			</a>

		</li>

		

		<!-- Slide 2 -->

		<li data-thumb="demo_files/images/150x99/3-min.jpg">

			<a href="#">

				<img src="demo_files/images/content_slider/3-min.jpg" alt="Slide 3">

				<div class="flex-caption">Flexslider Caption #2</div>

			</a>

		</li>

		

		<!-- Slide 3 -->

		<li data-thumb="demo_files/images/150x99/21-min.jpg">

			<a href="#">

				<img src="demo_files/images/content_slider/21-min.jpg" alt="Slide 4">

				<div class="flex-caption">Flexslider Caption #3</div>

			</a>

		</li>

		

		<!-- Slide 4 -->

		<li data-thumb="demo_files/images/150x99/23-min.jpg">

			<a href="#">

				<img src="demo_files/images/content_slider/23-min.jpg" alt="Slide 5">

				<div class="flex-caption">Flexslider Caption #4</div>

			</a>

		</li>



	</ul>

</div>