title: Flex slider on modal window doesn't work unless I click inspect element
body: <p>I am trying to develop a wordpress theme that has a modal window which displays a slide gallery of images queried from advanced custom field gallery. I am using FLEXSLIDER. </p>
  
  <p>Here is my code below:</p>
  
  <pre><code>&lt;div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"&gt;
    &lt;div class="modal-dialog modal-lg"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;                                  
  
        &lt;?php 
          $images = get_sub_field('featured_projects');
          if( $images ): ?&gt;
            &lt;div id="slider" class="flexslider"&gt;
              &lt;ul class="slides"&gt;
                &lt;?php foreach( $images as $image ): ?&gt;
                  &lt;li&gt;
                    &lt;img src="&lt;?php echo $image['url']; ?&gt;" alt="&lt;?php echo $image['alt']; ?&gt;" /&gt;
                    &lt;p&gt;&lt;?php echo $image['caption']; ?&gt;&lt;/p&gt;
                  &lt;/li&gt;
                &lt;?php endforeach; ?&gt;
              &lt;/ul&gt;
              &lt;div class="custom-navigation"&gt;
                &lt;a href="#" class="flex-prev"&gt;Prev&lt;/a&gt;
                &lt;div class="custom-controls-container"&gt;&lt;/div&gt;
                &lt;a href="#" class="flex-next"&gt;Next&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;?php endif; ?&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;&lt;/div&gt;                  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click the button to trigger the modal to show, the first image is displayed together with the image list but when I click the next or previous button, the slider doesn't move, but when I click the <strong>inspect element</strong> to see if the images are loaded, the next and previous buttons surprisingly works and shows the next images.</p>
  
  <p>Here is the output when flex slider is loaded the first time:
  <img src="https://i.stack.imgur.com/UTbFt.png" alt="screenshot"></p>
  
  <p>Here is the output when I open inspect element:
  <img src="https://i.stack.imgur.com/piBFC.png" alt="screenshot2"></p>
  
  <p>The query trigger for Flexslider:</p>
  
  <pre><code>$(window).load(function(){
    $('.flexslider').flexslider({
      animation: "slide",
      controlsContainer: $(".custom-controls-container"),
      customDirectionNav: $(".custom-navigation a"),
    });
  });
  </code></pre>
  
  <p>Is there something I am missing? Another guy encountered same problem but did not get an answer - <a href="https://stackoverflow.com/questions/34767003/flex-carousel-items-are-not-displaying-properly-until-i-clicked-on-inspect-eleme">https://stackoverflow.com/questions/34767003/flex-carousel-items-are-not-displaying-properly-until-i-clicked-on-inspect-eleme</a>. Please help</p>