title: TwentyTwenty JQuery plugin not showing all images. When resizing window all images are shown
body: <p>I'm trying to build my first website with before / after slider images.
  I'm using the <strong>TwentyTwenty jQuery plugin</strong>. When accessing the website, not all images are showing - when I reload or resize the window all are showing.</p>
  
  <p>My website: <a href="http://www.nygreenstreets.com" rel="nofollow noreferrer">http://www.nygreenstreets.com</a></p>
  
  <p>TwentyTwenty plugin: <a href="https://zurb.com/playground/twentytwenty" rel="nofollow noreferrer">https://zurb.com/playground/twentytwenty</a></p>
  
  <p>TwentyTwenty plugin on GitHub: <a href="https://github.com/zurb/twentytwenty" rel="nofollow noreferrer">https://github.com/zurb/twentytwenty</a></p>
  
  <p>For the images that are not showing I'm seeing a <strong>height of 0px.</strong></p>
  
  <p><code>&lt;div class="twentytwenty-container" style="height: 0px;"&gt;</code></p>
  
  <p><a href="https://i.stack.imgur.com/Ea7rb.png" rel="nofollow noreferrer">Slider images correctly showing</a> / <a href="https://i.stack.imgur.com/ZMPmf.png" rel="nofollow noreferrer">Slider images not showing</a> / <a href="https://i.stack.imgur.com/HxGpB.png" rel="nofollow noreferrer">Only after resizing the window or reloading the page are all slider images showing.</a></p>
  
  <p>The image sliders are in the following container:</p>
  
  <pre><code>&lt;div class="twentytwenty-container"&gt;
  &lt;img src="index_files/images/160 W 43rd St 1.jpg" /&gt;
  &lt;img src="index_files/images/160 W 43rd St 2.jpg" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>&lt;script&gt;
      $(function(){
        $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.5});
        $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.5, orientation: 'vertical'});
      });
      &lt;/script&gt;
  </code></pre>