mbmufffin/FlexSlider — Issue #81: Animate container during transition
Author: dgwyer
Created: 2012-02-28 14:30:17+00:00
State: open

We want to use FlexSlider in all our responsive WordPress themes, the first of which we are working on right now. Our site is PressCoders.com.

For maximum flexibility we need the slider to animate the height between slides 'during' the transition (i.e. not before, but during). This makes for a really nice smooth transition into the next/previous slide whilst animating the height too.

We have this working quite nicely by making use of the callback API, but with one small problem. If you have a set of slides with varying heights, the first initial slide presented has an incorrect height (usually set to the highest slide in the set?). If we can get the height of the first slide to display correctly then that would be fantastic.

I have attached the modified demo.html in pastebin so you can see what I have done so far. Just replace the demo.html in the shipped with the demo with this one. There is one other issue I should mention. This only works when the CSS3 transitions are NOT used. To make this work in all browsers I have commented out a line in the core so that they are never used. So make sure you view the modified demo.html file in a browser that doesn't use CSS3 transitions to see the modified code working properly.

Perhaps an option could be included in FlexSlider 2.0 to optionally use CSS3 transitions?

http://pastebin.com/VdFJRq8N