Flexslider shows second slide while loading page

Question

While loading my page (Ex: http://www.esthergibbons.com), Flexslider quickly flashes content of second slide and other slides before loading with the first slide visible.

I see other people have had similar Flexslider problems, but didn't find this exact situation.

Could it be an issue with lazy load? I'm very novice and don't know where to check to see what's causing the issue. Or what to change to fix it.

Thanks for any guidance!

Here's where I set up the Flexslider in HTML:

<!-- FlexSlider  -->
<section class="flexslider home">
    <ul class="slides">
        <li><img src="http://www.esthergibbons.com/images/weddings/002-bride-and-groom-in-baseball-pit.jpg" alt="Black and white wedding photo of bride and groom sitting on bench inside of rustic baseball pit, seen through hole in a chain-link fence" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-wedding-entrance-fountain-happy.jpg" alt="Emotional wedding photo of bride and groom entering ceremony hand in hand at Chateau Saint-Ambroise, Montreal" /></li>          
        <li><img src="http://www.esthergibbons.com/images/weddings/01-wedding-photo-mumford-lights-abbaye-oka.jpg" alt="Creative portrait of wedding couple dancing in doorway of rustic hallway lit with hanging lights, at Abbaye d'Oka, Quebec" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-bride-wiping-grooms-eyes-ceremony.jpg" alt="Photojournalistic wedding photo of bride reaching across to wipe groom's eyes during their wedding ceremony at Les Trois Tilleuls chapel in Monteregie, Quebec" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-groom-daughter-walking-hand-in-hand.jpg" alt="A calm photo of quiet moment as the groom walks away hand in hand with his young daughter" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-bride-groom-natural-wedding-photo-walking-away.jpg" alt="A natural photo of the bride and groom walking in a rustic wedding location" /></li>
        </ul>
</section>
<!-- FlexSlider / End -->

And here's where the Flexslider js file is: http://www.esthergibbons.com/scripts/jquery.flexslider.js

This could possibly be a helpful answer: http://stackoverflow.com/questions/14655692/how-to-hide-images-until-after-jquery-flexslider-finishes-loading — MannfromReno, Jan 25 '17 at 20:34
Where are you calling `flexslider()`? Can you post that code? — MannfromReno, Jan 25 '17 at 20:35
I believe I am calling it in the custom.js file or the jquery.flexslider.js file? Should I instead call it in each HTML document that uses a gallery? — Esther Gibbons, Jan 27 '17 at 00:33

Michael Coker · Answer 1 · 2017-01-25T20:50:09.263

The slides are displaying before the plugin initializes. Hide the slides via CSS so that the images won't be shown before the plugin initializes, then use the start() callback to show everything after flexslider initializes.

$('.flexslider').flexslider({
    start: function(){
         $('.slides').show(); 
    },
  });

.slides {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.js"></script>

<section class="flexslider home">
    <ul class="slides">
        <li><img src="http://www.esthergibbons.com/images/weddings/002-bride-and-groom-in-baseball-pit.jpg" alt="Black and white wedding photo of bride and groom sitting on bench inside of rustic baseball pit, seen through hole in a chain-link fence" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-wedding-entrance-fountain-happy.jpg" alt="Emotional wedding photo of bride and groom entering ceremony hand in hand at Chateau Saint-Ambroise, Montreal" /></li>          
        <li><img src="http://www.esthergibbons.com/images/weddings/01-wedding-photo-mumford-lights-abbaye-oka.jpg" alt="Creative portrait of wedding couple dancing in doorway of rustic hallway lit with hanging lights, at Abbaye d'Oka, Quebec" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-bride-wiping-grooms-eyes-ceremony.jpg" alt="Photojournalistic wedding photo of bride reaching across to wipe groom's eyes during their wedding ceremony at Les Trois Tilleuls chapel in Monteregie, Quebec" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-groom-daughter-walking-hand-in-hand.jpg" alt="A calm photo of quiet moment as the groom walks away hand in hand with his young daughter" /></li>
        <li><img src="http://www.esthergibbons.com/images/weddings/01-bride-groom-natural-wedding-photo-walking-away.jpg" alt="A natural photo of the bride and groom walking in a rustic wedding location" /></li>
        </ul>
</section>

Seems to be already hidden in the CSS here: `.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */` Will try adding start function in HTML... — Esther Gibbons, Jan 27 '17 at 00:37

Flexslider shows second slide while loading page

1 Answers1