title: Swiper.js vertical slideshow: How to deal with vertical content overflow?
body: <p>I've got a vertical slideshow (swiper.js library), which has slides that are 100% the viewport's height.</p>
  
  <p>But one of these is higher, due to long content...
  This leads to the bottom portion of the slide's content not being readable, because the slideshow always advances, when scrolling or swiping down.
  The content should be fully readable, without compromising the sliding functionality on Desktop and Mobile devices.</p>
  
  <p><strong>What I've tried:</strong></p>
  
  <ol>
  <li>Nested slideshows: It worked ok on Desktop, but on mobile it was hell.</li>
  <li>Turning Freemode on: Works, but doesn't provide snapping functionality to slides.</li>
  <li>Freemode with freeModeSticky: Same issue as with regular slider functionality.</li>
  </ol>
  
  <p><strong>Further attempts &amp; thoughts:</strong></p>
  
  <p>I've tried toggling Freemode: On, when the current slide is longer than Viewport and off, when not.
  But the swiper instance doesn't seem to allow mode changes, while active.
  I've also tried swiper_instance.update(), but to no prevail.</p>
  
  <p>I still find this approach promising, tho. Do you perhaps know a way to toggle Freemode?</p>
  
  <p>Do you have any other approaches, I could try?</p>
  
  <p>The code is below, as well as on <a href="https://codepen.io/EigenDerArtige/pen/ddeVPa" rel="nofollow noreferrer">https://codepen.io/EigenDerArtige/pen/ddeVPa</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
    var mySwiper = new Swiper ('.swiper-container', {
      direction: 'vertical',
      slidesPerView: 'auto',
      scrollbar: {
        el: '.swiper-scrollbar',
        dragEl: '.swiper-scrollbar-drag',
        draggable: true
      },
      mousewheel: true
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
    width:400px;
    height:600px;
    position:relative;
    background:blue;
    margin:0 auto;
    }
  #wrapper .swiper-container {
      position:absolute;
      top:15px; bottom:15px; left:15px; right:15px;
  }
  #wrapper .swiper-container .swiper-wrapper .swiper-slide {
          padding:15px;
          box-sizing:border-box;
          height:auto !important;
          min-height:100%;
  }
  #wrapper .swiper-container .swiper-wrapper .swiper-slide.slide1 { background:lightgreen; }
  #wrapper .swiper-container .swiper-wrapper .swiper-slide.slide2 { background:yellow; }
  #wrapper .swiper-container .swiper-wrapper .swiper-slide.slide3 { background:lightblue; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.css" rel="stylesheet"/&gt;
  
  &lt;main id="wrapper"&gt;
    &lt;!-- Slider main container --&gt;
    &lt;div class="swiper-container"&gt;
        &lt;!-- Additional required wrapper --&gt;
        &lt;div class="swiper-wrapper"&gt;
            &lt;!-- Slides --&gt;
            &lt;div class="swiper-slide slide1"&gt;
              &lt;h2&gt;Beginning of long Slide&lt;/h2&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
              &lt;h2&gt;End of slide&lt;/h2&gt;
            &lt;/div&gt;
            &lt;div class="swiper-slide slide2"&gt;Slide 2&lt;/div&gt;
            &lt;div class="swiper-slide slide3"&gt;Slide 3&lt;/div&gt;
            ...
        &lt;/div&gt;
  
        &lt;!-- If we need scrollbar --&gt;
        &lt;div class="swiper-scrollbar"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>