Looking to integrate Flexslider with WordPress?

WooSlider Plugin

Get started with FlexSlider in 3 easy steps!

Step 1 – Link files

Add these items to the <head> of your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!

Step 2 – Add markup

The FlexSlider markup is simple and straightforward. First, start with a single containing element, <div class=”flexslider”> in this example. Then, create a <ul class=”slides”>. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each <li> and you are ready to rock.

Step 3 – Hook up the slider

Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1. The $(window).load() is required to ensure the content of the page is loaded before the plugin initializes.

…and voila! That wraps up the most basic installation of FlexSlider into your webpage.

Step 4 – Tailor to your needs

Listed below are all of the options available to customize FlexSlider to suite your needs, along with their default values. For examples on how to use these properties for advanced setups, check out the Advanced Options section.

A little information about FlexSlider

About FlexSlider

FlexSlider was built to serve up the best responsive jQuery slider around. I had built a few implementations of responsive sliders on different client projects and noticed that there was a glaring hole for plugin support with the concept. I wanted to build a plugin that would serve the newest of beginners, while providing seasoned developers a tool they could use with confidence. What has come forth is this, FlexSlider. I plan to maintain this plugin and provide support to users implementing FlexSlider into their sites. Responsive web design can be tricky, but I hope that FlexSlider serves to uncomplicate the process, just a little bit.

Known issues

No known issues at this point. Feel free to log an issue on the Github repository.

Changelog

v1.8: October 22, 2011- CSS3 transform3d support for webkit browsers coupled with 1-to-1 swiping has been introduced. The entire touch swipe experience has been vastly improved beyond comparison to previous versions.- New resize event handling to nix the old behavior. Slides not stay in place, rather than moving around and then sliding back.- Added “slideDirection” property to support “vertical” or “horizontal” sliding directions

– Added “slider.manualPause” that is set by the pausePlay element and can be set via the callback API. This will prevent pauseOnHover from resuming on hover exit.

– Removed “touchswipe” property as a customizable options.

– Fixed behavior in slides with only two slides. Scrolling should happen as intended.

– Fixed pausePlay element bind to trigger both touchstart and click.

– Note: A destroy function has been added to the main plugin file, but is commented out and omitted from the minified version. Those interested can find the function and documentation to implement a custom destroy function based on their own needs/event triggers.

v1.7: September 10, 2011- Callback API features with start(), before(), after(), and end() options. All functions should include one parameter for the slider element. (ex. start: function(slider) {})- Crossfade has been introduced through new CSS techniques- pausePlay property added to support a dynamic pause/play element

v1.6: August 30, 2011- Vast improvements to the plugin architecture- Multiple instances of FlexSlider are now possible. (Please, consider your audience before going crazy with this)- Removed the “show” animation option in interest of other things. Use animationDuration: 0, if needed.

– FlexSlider CSS has been updated. Use the v1.6 stylesheet!

v1.5: August 27, 2011- Improved mobile support by adding “touchstart” to bound events- Implemented solution for no javascript fallback (relies on user, and prepares for html5 boilerplate/modernizr classes)

v1.3: August 18, 2011- Made slide animation a continuous scroll effect, rather than jumping back to start/end- Cleaned up code and created better test cases for different slider scenarios. The slider is a lot more bulletproof as of this update.