Slideshow not working in toggle tabs

[Historical Forums User]

Hi guys,

Please take a look at a site I’m developing, you will see I am making use of the slideshow plugin flexslider. You will also see that the site has multiple tabs. If you look at the news section you will see the articles each have a slideshow, these work fine when the tab is open by default, but if the article tab is closed by default and then opened, then the slideshow images are all small and not working correctly. Any help?

http://so-sorry.ch/

Many thanks,
Aaron

[Chris Coyier]

What you might want to try is to wait to initialize the slider until after the window is loaded. It looks like the widths of the list items in the slider are programmatically calculated. That calculation could be wrong if the image isn’t done loading yet. So it’s best to wait until it is loaded.

$(window).load(function() {
// load slider here
});

Or, make sure all those images have proper width/height attributes on them so the slider list items can be calculated correctly right away.

[Historical Forums User]

The problem is it’s a responsive layout, so there is no fixed width on the images only max-width: 100%

[hackerone]

Hey Aaron,

when i checked your website, you seemed to have removed the slider. so can’t really pinpoint the problem.

but what i think is happening is, when the tabs are hidden, the images inside it don’t get loaded

http://jsfiddle.net/TFeVJ/

so the image widths wouldn’t be calculated on windows load and hence the slide show doesn’t work

but when the tab is open, the images would be loaded on windows load.

what i would suggest is you can initialize the slide show once the tab is opened or use a script which checks if all the images inside the dom are loaded before firing a callback.

i’ve made one for my personal site, you can use that if it fits your bill,

https://github.com/hackerone/dynload

[geoffreyrose]

Hey Aaron,

Your problem might be the fact your using max-width: 100%.
I have only had problems declaring max-width: 100%. Instead try doing something like this.

.class {
max-width: 960px; /** Put in whatever is the largest width it wil ever need to be **/
width: 100%;
}

[Author]

Posts