Carousel hides images until all loaded

[maikeldaloo]

Hello,

I have an issue with the carousel at the moment where the images aren't shown until they're all loaded.
So I get a blank page until all images are done loading.

I found that the issue didn't come from any JS file, but it came from bootstrap.css, possibly something to do with the transitions?
Something to do with this:

.carousel .item {
  position: relative;
  display: none;
  -webkit-transition: 0.6s ease-in-out left;
     -moz-transition: 0.6s ease-in-out left;
      -ms-transition: 0.6s ease-in-out left;
       -o-transition: 0.6s ease-in-out left;
          transition: 0.6s ease-in-out left;
}

Could anyone please help me?

Thanks,
Maikel

[maikeldaloo]

Found out what the issue was :)

It was because I haven't set the class 'active' on my first item, so the script is waiting until the time reaches the 'interval', and only then it switches to the first item.

Maybe to save someone else the same amount of time this took me to figure out, it's probably a good idea to update the jquery function to check if the carousel has an 'active' item. If not, treat the first item as active.

[fat]

Think we're going to leave this as is. We try to be as uninvasive as possible in the js. Thanks though!