title: JQuery Swiper slide height
body: <p>I am using <a href="http://idangero.us/swiper/api/#.WFHCmX2MHo0" rel="nofollow noreferrer">JQuery Swiper</a>.  I essentially have a section where I set the height to the viewport height.</p>
  
  <pre><code>#portfolio {
    height: 100vh;
  }
  </code></pre>
  
  <p>Within this section, I have a left side and a right side, which I set to 100%</p>
  
  <pre><code>#portfolio-left {
      background: #6bbea5 none repeat scroll 0 0;
      height: 100%;
  }
  
  #portfolio-right {
      height: 100%;
      padding: 0;
  }
  </code></pre>
  
  <p><code>#portfolio-left</code> will just hold a little text, while <code>#portfolio-right</code> will hold my slider.</p>
  
  <p>So I have added my slider container, and the contents I want added to the slider.  I then set it up</p>
  
  <pre><code>$(function() {
  
       var swiperH = new Swiper('.swiper-container-h', {
          pagination: '.swiper-pagination-h',
          paginationClickable: true
      });
      var swiperV = new Swiper('.swiper-container-v', {
          pagination: '.swiper-pagination-v',
          paginationClickable: true,
          direction: 'vertical',
          freeMode: true,
          autoHeight: true,
          grabCursor: true
      });
  });
  </code></pre>
  
  <p>It will eventually be bi-directional hence the reason I have vertical and horizontal.  I have added two slides vertically to demonstrate my issue.  Essentially, the first slide has a lot of content, and it is not being given a dynamic height.  I believe this has something to do with giving it 100% height on the portfolio-right, but not too sure.  I have set up a <a href="https://jsfiddle.net/L9fup6aq/2/" rel="nofollow noreferrer">JSFiddle</a> to demonstrate.</p>
  
  <p>How can I get the slides to have an auto height, whilst at the same time having the whole section 100vh?</p>
  
  <p>This is an example of what I am after
  <a href="https://i.stack.imgur.com/YRscy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YRscy.jpg" alt="Example"></a></p>
  
  <p>Many thanks</p>