I've found that the carousel is finicky when content changes sizes, especially under the following circumstances:
- The browser window is resized.
- Images or other content finish loading after the carousel is initialized.
A good example is a vertical carousel, with images on the left side, and content (i.e. image caption) flowed in the remaining space to the right. When the page first loads, the free-flowing content is sized appropriately to take-up the space between the image and the right side of the page. But, if the user resizes the browser window, the content isn't re-flowed -- it's cut-off. The content is only re-flowed if the user reloads the page. This is frustrating in a dynamic width layout.
In that same example, if the images in the carousel are provided by an ImageCache preset, then the carousel will cut-off the images the first time that they are loaded, because ImageCache doesn't set the width and height arguments of the image until after the first load (the info isn't available until after it has cached the image). It would be nice if the carousel would only initialize once all the content within it is loaded.
A client of mine has been complaining that when they upload images for the first time, the carousel looks really strange, with all of the images cut-off. As a workaround, I have a CSS rule that ensures that the images have a min-width and min-height, to minimize the amount that they are cut-off on the initial page load.
Is there any way to have the carousel dynamically calculate widths and heights?
Comments
Comment #1
neclimdulYou might try imagecache and CSS rules defining the width/height. This will provide better performance and user experience anyways. Especially since dynamic content sizes affects the carousel frame and so would mean that it would use a different amount of space depending on the content, affecting your site layout.
UI Carousel should try and detect sizes when these aren't set but for various browser reasons and render optimizations this doesn't always work out well.
Comment #2
neclimdul