Sliders as carousel - issue


I use ion-slides as horizontal “cover flow” or carousel type of UI. It works great, except that everytime user switched to it there is a small glitch - slides element loads 1 slide first (sort of “full screen”) and only then propagates to be multi slides slider. See the gif.

The only work around I would is to listen to events and until all the images in the slides are loaded not to reveal the slides element.

But is there a better way to fix it?

OK I thought initially this could be the issue with the fact that source of slides in my case was dynamic (bound to data). Now I also experimented in my code to adding static 10 slides and setting parameter slidesPerView to 5.
Still effect is the same - one delegate shown first and then all the rest are loaded.

I checked with idangerous web site and their demos. Not sure what they do with “loading…” thing to sort of hide this bit of ugliness:)

But I think it should not work like this. It looks like a bug to me

OK after some research I found a fix and it was shamefully easy:
apply style height: auto to the ion-slides…LOL

Actually not yet…but solution is close. Testing further

Solved it this way:
.bottomPanelIonSlide {
display: block;
width: auto;
height: auto;