Hey,

I love that the flexslider is responsive, and touch screen ready, but when the page loads, all slider images stack vertically until they all load, then it all quickly flicks into the slider.

This doesn't look great on page load, as it plays havoc with other page elements for a second or two.

Is there a way to only show the first slide on load, and let the other slides load hidden?

Comments

Anks’s picture

Anks CreditAttribution: Anks commented
Status: Active » Closed (fixed)

Hi chris,

Thanks for pointing the issue.

You can add css display:none to LI elements.

for example
<li class="slide" style="display:none;"><img src="<?php print $img1;?>"alt="Slide1"/></li>

It will solve the issue.

I will add this solution to next realease.

Collins405’s picture

Collins405 CreditAttribution: Collins405 commented

Ah, perfect, thanks mate.

algates’s picture

algates CreditAttribution: algates commented
Issue summary: View changes

Hi Collins405, I have added in css like below

 .flexslider .slides > li {
    display: none;
}

But its not working, can you help me to fix this issue.

Collins405’s picture

Collins405 CreditAttribution: Collins405 commented

@algates Its been so long, I don't remember it now. Have you got a URL I can look at?

algates’s picture

algates CreditAttribution: algates commented

@Collins405 www.iopex.com look at this in firefox, slider image loading first, and again loading initial(first) image, and i have checked in slider li element also, its having display:block property, i dont know how could i change. Help me to fix it.

Collins405’s picture

Collins405 CreditAttribution: Collins405 commented

@algates That looks fine to me? Tested in Chrome and Firefox, and seems to be ok. There is a slight jump in the orange content box, as there is no set height on the slider. You could set different heights at css break points so the content doesn't jump around while the slider loads.

algates’s picture

algates CreditAttribution: algates commented

@Collins405 thanks for helping, actually i am worry about slider image loading, flex slider image loaded when page loads and got one flickering and load again, i think, it happened because of display:none|block property, kindly look at this collins pls.

MauroCacio’s picture

MauroCacio CreditAttribution: MauroCacio commented

Ciao Anks.
Il tuo tema è stupendo.
Non so è già è stato chiesto:
-come faccia ad aumentare di numero le slide della pagina iniziale, portandole da 3 originali a 5/6 ecc..
Grazie.
Ciao e ancora complimenti
MauroC