title: Swiper init after AJAX call is wrong
body: <p>I have a Swiper in a separate HTML-File called <code>scrollyteller.html</code>:</p>
  
  <pre><code>&lt;section class="scrollyteller"&gt;
      &lt;div class="swiper-container"&gt;
  
          &lt;div class="swiper-wrapper"&gt;
             &lt;!-- Slides here --&gt;
          &lt;div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>The reason why I have this in a separate file is, that this swiper has some complex animations and a lot of assets which i don't wanna load everytime the user visits the website. The Swiper later will be triggered by a click on a link withing the navigation.</p>
  
  <p>So I have an <code>index.html</code> that loads a <code>script.js</code> with all the required functions to initialize the swiper. The function to initialize the swiper is called <code>initScrolly()</code>. </p>
  
  <p>I also have a button on the <code>index.html</code> that initialized the <code>XMLHttpRequest</code> to get the <code>scrollyteller.html</code>. </p>
  
  <p>The following is the script to get the html-file and append it to the <code>index.html</code>:</p>
  
  <pre><code>.....click function on button:
  
                  xhr.onreadystatechange = function () {
                      if (xhr.readyState === 4) {
  
                          var parsedResult = parser.parseFromString(xhr.response, "text/html"),
                              html = parsedResult.querySelector('body').innerHTML;
  
                          container.insertAdjacentHTML('beforeend', html);
  
                          container.style.display = "block";
  
                          initScrolly();
  
                      }
                  };
  
              xhr.open('GET', url);
  
              xhr.send();
  </code></pre>
  
  <p>I call <code>initScrolly()</code> at the end of the AJAX call but it seems like the DOM is not ready from the <code>scrollyteller.html</code>. Cause Swiper calculates wrong heights (like 126123px....) and the pagination bullets aren't initialized either. Once I resize my window the Swiper works just fine. So it must be the DOM (?).</p>
  
  <p>Those are the swiper settings:</p>
  
  <pre><code>var settings = {
      slidesPerView: 1,
      paginationClickable: false,
      mousewheelControl: true,
      simulateTouch: false,
      speed: 1000,
      effect: 'fade',
      pagination: '.swiper-pagination',
      direction: 'vertical',
      onPaginationRendered: function(){
          if (!rendered) {
              initBullets(scrollyteller);
          }
          rendered = true;
      },
      onImagesReady: function() {
  
          if (!loaded) {
              //remove loader only when images are loaded;
  
              TweenMax.to(loader, 1, {
                  opacity: 0, onComplete: function () {
                      loader.style.display = "none";
                      TweenMax.to(scrollyWrapper, 2, {opacity: 1});
                  }
              });
          }
          loaded = true;
      }
  };
  </code></pre>
  
  <p>When I open the <code>scrollyteller.html</code> on it's own, everything is working fine. It's just not working with the AJAX. </p>
  
  <p>So the question really is, how do I make sure the DOM is ready before I call <code>initScrolly()</code> ?</p>
  
  <p>I have tried to put a <code>&lt;script&gt;</code> tag at the end of the <code>scrollyteller.html</code> but that didn't really work either as the script is not evaluated on it's own. and evaluating the script inside the AJAX-Call results in the same problem as just calling the function.</p>
  
  <p>Any help is appreciated. Thanks!</p>