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!
by 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.
Browser Support
FlexSlider has been verified in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. jQuery versions 1.3+ are supported.
Future Goals
- Support for multiple sliders (supported as of v1.6)
- iOS swipe gestures (supported as of v1.2)
- Callback API (supported as of v1.7)
- CSS3 transitions (supported as of v1.8)
- Addition of carousel options (visible slides, # of slides to move on animate, etc.)
- Custom configuration support for smallest file sizes possible.
- More theme options
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 “mousewheel” property to support mousewheel scrolling of slide elements.– 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– animationLoop property added to support non-looping sliders– FlexSlider CSS further improved, including IE hacks to improve cross-browser design integrity
- 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.4: August 23, 2011- Added “manualControls” property to allow for custom, non-dynamic control navigation- Added “show” animation to allow for instant transitions between slides
- 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.
- v1.2: August 16, 2011- Fixed some code redundancies- Added “randomize” property to randomize slide oder on pageLoad- Added “touchSwipe” property for swipe gestures on iOS and Android devices (no Android device to test this, but it should work)– Fixed minor bugs in jQuery 1.3.2 where navigation was not appending correctly– Fixed major bug in jQuery 1.3.2 where slide animation was not sliding
- v1.0 – Initial release under the MIT license.
Contributors
Managing this project takes a significant chunk of my time outside of work, so I would like to give my sincerest thanks to those who have supported FlexSlider:
- Andrew Fenenbock
- Nicholas Frota
- Datch Haven
- Amber Weinberg
- Daniel & Evelina Barry
- Justin Myers – Zero Signal Productions
- Ruth Elliot – EDU Designs
- Tim Hyde – Hyde Internet
- Shlomi Atar
- Courtney Curtis
- Simon Clayson
- Martin Gartner
- Mark – Hild/Nelson Design
- Jeroen Wiersma
0 Komentar