FlexSlider dynamic vertical height
FlexSlider currently (2014-07-15) doesn't support dynamic heights for the vertical slider (see https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties#direction).
Based on some discussion at https://github.com/woothemes/FlexSlider/issues/174#issuecomment-12529436 I added some code for the vertical slider that handles content of varying heights, and resizes the content when the browser window resizes (so the slider is responsive).
The code also demonstrates how to load FlexSlider options from HTML5 data-* attributes on the FlexSlider container. Right now it only checks for attributes listed in the `attrs` array, so if you're using another option you will need to add it to the array.
This code optionally uses the wonderful http://benalman.com/projects/jquery-throttle-debounce-plugin/ if available to limit how often the window resize callback is run.
HTML
<link rel="stylesheet" href="https://rawgit.com/woothemes/FlexSlider/master/flexslider.css">
<script src="https://rawgithub.com/woothemes/FlexSlider/master/jquery.flexslider.js"></script>
<script src="https://rawgit.com/cowboy/jquery-throttle-debounce/master/jquery.ba-throttle-debounce.js"></script>
<div class='flexslider' data-flexslider-direction='vertical' data-flexslider-direction-nav='false'>
<ul class='slides'>
<li>
<p>Pellentesque ante metus, tristique vel tristique eu, iaculis ut urna. Duis nec porta arcu. Curabitur eget enim augue. Nullam in interdum tortor. Vestibulum et tortor arcu. Aenean ac dui et mauris bibendum blandit in id mi. Ut lobortis aliquet aliquam. Nunc sit amet commodo ante, mattis auctor magna. Vivamus eu sem nulla. Duis at posuere arcu. Sed non nunc metus. Nam vestibulum id dui malesuada vehicula.</p>
</li>
<li>
<p>Suspendisse auctor feugiat mauris, molestie ullamcorper velit faucibus vitae. Phasellus elementum faucibus eros, a porttitor risus fermentum in. Cras feugiat ligula eget nisl malesuada lacinia. Nunc nibh massa, varius sed vulputate posuere, accumsan auctor neque. Vestibulum dapibus sollicitudin tempor. Nam vel orci massa. Integer nec lacus quis nulla venenatis posuere. Nulla sed urna eros. Ut tempor porttitor lectus id gravida. Sed nec mauris tristique, mollis justo et, gravida justo. Donec semper, urna ut vulputate semper, orci mauris congue augue, vitae aliquam odio felis eget mi. Morbi nunc libero, condimentum a est quis, ultrices sagittis nulla.</p>
</li>
<li>
<p>Morbi imperdiet orci erat, dignissim dignissim justo venenatis at. Nullam velit nibh, consectetur in tellus dictum, pharetra viverra purus. Morbi at nisi ligula. Vivamus hendrerit elit est, ullamcorper pretium libero rhoncus sit amet. Vivamus bibendum id leo a accumsan.</p>
</li>
</ul>
</div>
JavaScript
window.jQuery && jQuery(function($) {
// Initialize FlexSlider
if ($.fn.flexslider) {
// Load the following options from the HTML5 data-
// attributes. If you plan to use any other options,
// they must be listed in this array as well.
var win = $(window),
attrs = ['direction', 'directionNav', 'smoothHeight', 'slideshowSpeed'];
$('.flexslider').each(function() {
var options = {
animation: 'slide'
},
el = $(this),
i = 0,
attr, val;
while (attr = attrs[i++]) {
// jQuery will handle converting the camelcase
// option names into proper HTML5 data- attributes
// (e.g. 'directionNav' =>
// 'data-flexslider-direction-nav')
val = el.data('flexslider-' + attr);
if (typeof val !== 'undefined') {
options[attr] = val;
}
}
// Extra code to fix vertical slider
if (options.direction === 'vertical') {
function fixHeight() {
var maxHeight = 0,
slides = el.find('.slides'),
data = el.data('flexslider');
slides.children()
.height('auto')
.each(function() {
maxHeight = Math.max(maxHeight, $(this).height());
})
.height(maxHeight);
slides.height(maxHeight);
data && (data.h = maxHeight);
}
// Run fixHeight after a few important points in
// the page load process (this seems like a lot,
// but so far seems to catch everything that could
// cause sizing issues)
// After page load is complete
win.load(function() {
fixHeight();
// One second after page load is complete
setTimeout(fixHeight, 1000);
});
// Immediately after window resize (before
// FlexSlider's resize handler)
win.resize(fixHeight);
// If jQuery throttle is available, 250ms after
//...