CODEWITHSUNDEEP
javascriptjquerycss
WinterInc
WinterInc

Reputation: 1

Flex Slider Seems to Load Before CSS

I'm using FlexSlider in what seems like a pretty simple manner. However, after it reaches the final slide and loops back to the first slide, the content seems to "snap" into place, as though the slider loaded prior to the CSS.

Here's a stripped down example:
http://aj2.w-interactive.com/mds-slider-test2.html

You'll notice that after the slider loops back around from the third slide (you need to watch it go all the way through), the text in the first slide (where it says "We Deliver Your Trust" etc...) initially loads without the styles, then sort of "jumps" down into place, as though the styles finally loaded for it. But the first time it loads up, before looping through, it's totally fine.

Here's the script from the bottom of the page:

<!-- FlexSlider -->
  <script defer src="assets/js/jquery.flexslider.js"></script>

<script type="text/javascript">
    $(function(){
      SyntaxHighlighter.all();
    });
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
		slideshowSpeed: "4500",
		pausePlay: "true",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

Any ideas would be appreciated. Thanks!

Upvotes: 0

Views: 542

Answers (1)

Daniel Ma
Daniel Ma

Reputation: 646

Your CSS is not being applied correctly because you have multiple elements with the same ID.

Reference: http://www.w3schools.com/tags/att_global_id.asp

"The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document)."

You have this in your sample HTML

<li>
    <div id="slides" class="bkgd1">
        <h1 class="fade">We Deliver Your Trust</h1>
        <h1 class="fade">Intermodal Drayage</h1>
        <h2 class="fade">Centrally Located Terminals</h2>
        <h2 class="fade">9 Locations Covering North America</h2>
    </div>
</li>
<li>
    <div id="slides" class="bkgd2">
        <h1 class="fade">Rail &amp; Steamship Interchange</h1>
        <h2 class="fade">Fully Customs Bonded</h2>
    </div>
</li>
<li>
    <div id="slides" class="bkgd3">
        <h1 class="fade">Dedicated Fleet &amp; Preferred Network</h1>
        <h2 class="fade">Real Time Dispatch Technology</h2>
        <h2 class="fade">Instant Proof of Delivery</h2>
    </div>
</li>

And this in your CSS

#slides h1

Change these ID's to classes (like this)

<div class="slides bkgd1">
<div class="slides bkgd2">
<div class="slides bkgd3">

And change your CSS selectors accordingly

.slides h1

And then it should work.

More Detail

FlexSlider creates clones of your <div> elements to allow for smooth cycling and repeating. When it creates the clones, it copies the ID from the original and appends "_clone" to the end of it. This is actually what you see when you go back to the first slide after cycling through. Therefore, your CSS styles (#slides h1 etc) are not being applied.

Further, it is not enough to simply add #slides h1, #slides_clone h1 because of the first thing I mentioned in this answer. IDs must be unique.

Upvotes: 1

Related Questions