title: Responsive text -- Function not Initializing with FitText and FlexSlider
body: <p>I have a responsive slider using FlexSlider.
  I also want the text under each slider to resize. FitText does not initialize on any slide except for the first, or if I resize the window.
  How can I make this work (with no FOUC)?
  Should work in IE 8 up, plus modern browsers.</p>
  
  <p><a href="http://jsfiddle.net/simply_simpy/adtVP/11/" rel="nofollow">http://jsfiddle.net/simply_simpy/adtVP/11/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div class="flexslider"&gt;
        &lt;ul class="slides"&gt;
          &lt;li&gt;
              &lt;figure&gt;
                &lt;img src="http://lorempixel.com/400/200/animals/" alt="" /&gt;
                &lt;figcaption&gt;
                  &lt;h1&gt;Lorem ipsum dolor sit amet&lt;/h1&gt;
                  &lt;p&gt;consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco &lt;/p&gt;
                &lt;/figcaption&gt;
              &lt;/figure&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;figure&gt;
                &lt;img src="http://lorempixel.com/400/200/sports/" alt="" /&gt;
                &lt;figcaption&gt;
                  &lt;h1&gt;uis nostrud exercitation ullamco &lt;/h1&gt;
                  &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco &lt;/p&gt;
                &lt;/figcaption&gt;
              &lt;/figure&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;figure&gt;
                &lt;img src="http://lorempixel.com/400/200/people/" alt="" /&gt;
                &lt;figcaption&gt;
                  &lt;h1&gt;ncididunt ut labore et dolore magna aliqua.&lt;/h1&gt;
                  &lt;p&gt;abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco &lt;/p&gt;
                &lt;/figcaption&gt;
              &lt;/figure&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;​
  </code></pre>
  
  <p><strong>CSS</strong><br></p>
  
  <pre><code>    .flex-control-nav, .flex-control-paging {
          clear: both;
      }
  
      .flexslider {
          width: 100%;
      }
  
      .flexslider img {
        min-width: 100%;
      }
      h1 {
          font-size: 23px;
          width: 100%;
      }
      p {
          font-size: 16px;
          width: 100%;
      }
      .slides li {display: none}
  </code></pre>
  
  <p><strong>JS</strong> </p>
  
  <pre><code>$('.flexslider').flexslider();
  
  $(".slides h1, .slides p").fitText();  ​
  </code></pre>