Sponsor

Social Share

Flexslider WordPress or Blogger Slider Toolkit by Serbakerens

WooSlider

SERSLIDER PLUGIN

Easily integrate FlexSlider with WordPress.
GET THE PLUGIN

WOOCOMMERCE
SLIDESHOW EXTENSION

Display your products in a neatly designed, responsive slideshow within WooCommerce.
LEARN MORE

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!
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
view rawFlexslider header hosted with ❤ by GitHub

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.
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
</ul>
</div>
view rawFlexslider Markup hosted with ❤ by GitHub

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.
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
…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.
namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation: "fade", //String: Select your animation type, "fade" or "slide"
easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
reverse: false, //{NEW} Boolean: Reverse the animation direction
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds
initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false, //Boolean: Randomize slide order
// Usability features
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
// Primary Controls
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
// Secondary Navigation
keyboard: true, //Boolean: Allow slider navigating via keyboard left/right keys
multipleKeyboard: false, //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel: false, //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
playText: 'Play', //String: Set the text for the "play" pausePlay item
// Special properties
controlsContainer: "", //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
manualControls: "", //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
sync: "", //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
asNavFor: "", //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
// Carousel Options
itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 0, //{NEW} Integer: Margin between carousel items.
minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 0, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
// Callback API
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){}, //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function(){} //{NEW} Callback: function(slider) - Fires after a slide is removed
view rawFlexslider Options hosted with ❤ by GitHub

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

  1. 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.
  2. 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
  3. 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!
  4. 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)
  5. 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
  6. 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.
  7. 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
  8. 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

Posting Komentar

0 Komentar