Comments (8)
I am doing it like this:
start: function(slider){ // init the height of the first item on start
var $new_height = slider.slides.eq(0).height();
slider.height($new_height);
},
before: function(slider){ // init the height of the next item before slide
var $new_height = slider.slides.eq(slider.animatingTo).height();
if($new_height != slider.height()){
slider.animate({ height: $new_height }, 250);
}
}
Works fine
from flexslider.
Thanks for getting back. That works ok but not well with media queries. When you scale the window, the height of the container doesn't resize appropriately.
That's ok though, i've moved on to just using the cycle plugin and fixed heights.
from flexslider.
Not a difficult task at all:
$(document).ready(function() { var $flexslider = jQuery('.flexslider').flexslider({ start: function(slider){ // init the height of the first item on start var $new_height = slider.slides.eq(0).height(); /* add a current class to the active item */ slider.slides.removeClass('current'); slider.slides.eq(0).addClass('current'); slider.container.height($new_height); }, before: function(slider){ // init the height of the next item before slide var $animatingTo = slider.slides.eq(slider.animatingTo); var $new_height = slider.slides.eq(slider.animatingTo).height(); /* add a current class to the active item */ slider.slides.removeClass('current'); $animatingTo.addClass('current'); if($new_height != slider.container.height()){ slider.container.stop().animate({ height: $new_height }, 250); } } }); });
$(window).resize(function() { clearTimeout(this.id); this.id = setTimeout(doResizeSlide, 500); }) function doResizeSlide() { var slider = jQuery('.flexslider ul.slides'); var newHeight = jQuery('li.current', slider).height(); slider.stop().animate({ height: newHeight }); }
The timeout is set to avoid conflicts on resize with responsive columns layout like skeleton or similar.
Cheers
from flexslider.
smoothHeight property has been added to FlexSlider 2, baking in this functionality.
from flexslider.
Where is this functionality implemented? I don't see a 2.x branch available, or a commit to latest code that implements this "smoothHeight" property...
Needing this on a current use case, and would prefer to use a baked in functionality before implementing the suggestion(s) above.
from flexslider.
On my local machine... :)
FlexSlider 2 beta branch will go up soon. Very soon.
from flexslider.
I'm implementing the above solution by doitmax as a temporary fix while I wait for flexslider 2's native smoothHeight property (thanks in advance mbmufffin!).
It works perfectly on iOS devices for me (both iPhone and iPad) but not in Firefox, Chrome, or Safari on the desktop. On the desktop browsers, the slide height starts to animate like it's collapsing to the correct height, then pops back to the height of the largest slide. Any ideas?
from flexslider.
@doitmax Thank you!
Those lines did work well for me, I've just to make a few changes on timings (animation slider/height slider) to get it working.
from flexslider.
Related Issues (20)
- Prevent vertical swipe while swiping horizontally HOT 2
- Fix for Number-typed values are deprecated for jQuery.fn.css
- Forbid to tab through the slider HOT 1
- swipe is reverse in RTL
- $( '.flexslider' ).flexslider({ is not running occasionally HOT 1
- hiding slides with display:none to filter them... way to 'recount' the slides after doing so
- Using iframes (yt-videos) in flexslider breaks the last slide (animation: slide)xslider HOT 1
- Trouble placing multiple instances of flexslider on a website or page
- When animationSpeed becomes large, the image doesn't switch to a smartphone with Chrome's Devtools.
- The package could not be installed. Trying to install the plugin, get an empty plugin error?
- Fetching Thumbnail images dynamically
- Not compatible with Google Chrome and rtl mobile browsers HOT 1
- Is FlexSlider abandoned? HOT 1
- fix scrolld in 5000 min
- How to setup Flexslider in a gulpfile HOT 1
- FlexSlider prevents use of back/forward cache
- does not start on the first slider HOT 1
- slide container gets bigger when another slide has a tall vertical or horizontal image
- Cannot read properties of undefined (reading 'toLowerCase'
- thumbCaptions setting creates invalid html
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flexslider.