title: height issue with Dragend JS
body: <p>I am using Drangend JS (<a href="https://github.com/Stereobit/dragend" rel="nofollow">https://github.com/Stereobit/dragend</a>) but I am having issues with setting the height to automatic. </p>
  
  <p>I have two divs in the slide, one 200px the other 500px. 
  The page uses the height of the tallest div (500px), but I want the height of the page to change to the height of div currently visible when swiped or clicked . If div one is visible, the page height should be 200px and if div 2 is visible, the page height should be 500px</p>
  
  <pre><code>&lt;body&gt;
   &lt;div id="demo"&gt;
     &lt;ul&gt;
      &lt;li class="first dragend-page" &gt;&lt;/li&gt;
      &lt;li class="last dragend-page"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  
   &lt;ul class="nav"&gt;
     &lt;li data-page="1" &gt;1&lt;/li&gt;
     &lt;li data-page="2"&gt;2&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Below is my code</p>
  
  <pre><code> &lt;script&gt;
  
  $(function() {
    $("#demo").dragend({
      afterInitialize: function() {
        this.container.style.visibility = "visible";
      },
      onSwipeEnd: function() {
        var first = this.pages[0],
            last = this.pages[this.pages.length - 1];
  
        $(".prev, .next").removeClass("deactivated");
        $(".nav li").removeClass("active");
  
        $(".nav li").eq(this.page).addClass("active");
  
      }
    });
  
  
    $(".nav").click(function() {
      var page = $(event.target).data("page");
  
      $("#demo").dragend({
        scrollToPage: page
      });
  
      $(event.target).addClass("active");
  
    })
  
  });
  &lt;/script&gt;
  </code></pre>