title: Trying to nest twentytwenty inside a bootstrap carousel
body: <p>I'm trying to nest multiple instances of the <a href="http://zurb.com/playground/twentytwenty" rel="nofollow noreferrer">twentytwenty</a> plugin inside of a bootstrap carousel.</p>
  <p>Here is my code:</p>
  <pre><code>&lt;div class=&quot;row-fluid&quot;&gt;
          &lt;div id=&quot;slideshow&quot; class=&quot;carousel slide carousel-fade&quot; data-ride=&quot;carousel&quot; data-pause=&quot;hover&quot;&gt;
              &lt;ol class=&quot;carousel-indicators&quot;&gt;
                  &lt;li data-target=&quot;#slideshow&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
                  &lt;li data-target=&quot;#slideshow&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
              &lt;/ol&gt;
              &lt;div class=&quot;carousel-inner&quot;&gt;
                  &lt;div class=&quot;item active&quot;&gt;
                      &lt;div class=&quot;twentytwenty-container&quot;&gt;
                          &lt;img src=&quot;images/img1.1.jpg&quot; class=&quot;img-responsive&quot;&gt;
                          &lt;img src=&quot;images/img1.jpg&quot; class=&quot;img-responsive&quot;&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;item&quot;&gt;
                      &lt;div class=&quot;twentytwenty-container&quot;&gt;
                          &lt;img src=&quot;images/img2.1.jpg&quot; class=&quot;img-responsive&quot;&gt;
                          &lt;img src=&quot;images/img2.jpg&quot; class=&quot;img-responsive&quot;&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And my js:</p>
  <pre><code>$(function(){
      $(&quot;.twentytwenty-container&quot;).twentytwenty({
          default_offset_pct: 0, // How much of the before image is visible when the page loads
          orientation: 'vertical', // Orientation of the before and after images ('horizontal' or 'vertical')
          no_overlay: true //Do not show the overlay with before and after
      });
  });
  </code></pre>
  <p>The problem is that the first item in the carousel displays just fine, but when I slide to the second item it's blank, like the div is not loading/displaying.</p>
  <p>Side note: If I click &quot;inspect element&quot; in chrome on the second slide it suddenly pops into existance.</p>
  <p>Any help is greatly appreciated, <br>
  Alex @atypicalthemes.com</p>