Flexslider has the following features:
Support slide and fade effects.
Support horizontal and vertical direction of the slide.
Supports keyboard arrow keys to control.
Support touch slide.
Text and graphics support, support for a variety of html elements.
Adaptive screen size.
The number of units can be controlled slide.
More options settings and the callback function.
HTML
First load the library files and Flexslider jquery plugins, as well as basic css style file Flexslider desired site in the page head.
<link rel="stylesheet" type="text/css" href="flexslider.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.flexslider-min.js"></script> Then add the following HTML code in the body:
<div class="flexslider">
<ul class="slides">
<li><img src="images/s1.jpg" /></li>
<li><img src="images/s2.jpg" /></li>
<li><img src="images/s3.jpg" /></li>
<li><img src="images/s4.jpg" /></li>
</ul>
</div> We used .flexslider to include all the content elements need to scroll, and then use [ul class = "slides"] This class is critical, internal contents are for .slides rolling, and then in [li] Internal join any html element , including pictures and text.
jQuery
Call Flexslider plugin is very simple, use the following code:
$(function() {
$(".flexslider").flexslider();
}); Then preview the page effect, a content switching effect is complete, of course, want more personalization, flexslider provides a wealth of options to configure and callbacks definitely meet the needs of most developers.
More Flexslider related information can be accessed Flexslider official website address: http: //www.woothemes.com/flexslider/
