title: BUG: idangerous Swiper - Nested vertical slides with fade
body: <p>The easiest way to explain the bug is by showing you, check out this fiddle:</p>
  
  <p><a href="https://jsfiddle.net/iforwms/a13fgzdm/13/" rel="nofollow">https://jsfiddle.net/iforwms/a13fgzdm/13/</a></p>
  
  <p>Sliding to slide number 2 and sliding up and down through the nested vertical slides results in the third set of slides being scrolled, not the current set of slides.</p>
  
  <p>Regardless of how many sets of vertical slides you add, it's always the last set that get scrolled. It's an issue of the opacity I think, the browser picks up the top level div (the last one in the code) and scrolls through that, because the opacity is set to 0 but the div element is still there.</p>
  
  <p>Changing line 5 of the javascript, removing the fade effect on the horizontal slide removes the issue.</p>
  
  <p>I've logged this as a bug on their GitHub page, but any ideas of fixes in the mean time?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- Swiper --&gt;
  &lt;div class="swiper-container swiper-container-h"&gt;
      &lt;div class="swiper-wrapper"&gt;
          &lt;div class="swiper-slide"&gt;Horizontal Slide 1&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
              &lt;div class="swiper-container swiper-container-v"&gt;
                  &lt;div class="swiper-wrapper"&gt;
                      &lt;div class="swiper-slide"&gt;Vertical Slide 1&lt;/div&gt;
                      &lt;div class="swiper-slide"&gt;Vertical Slide 2&lt;/div&gt;
                      &lt;div class="swiper-slide"&gt;Vertical Slide 3&lt;/div&gt;
                      &lt;div class="swiper-slide"&gt;Vertical Slide 4&lt;/div&gt;
                      &lt;div class="swiper-slide"&gt;Vertical Slide 5&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="swiper-pagination swiper-pagination-v"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
              &lt;div class="swiper-container swiper-container-v2"&gt;
                  &lt;div class="swiper-wrapper"&gt;
                      &lt;div class="swiper-slide"&gt;Vertical Slide 2-1&lt;/div&gt;
                      &lt;div class="swiper-slide"&gt;Vertical Slide 2-2&lt;/div&gt;
                      &lt;div class="swiper-slide"&gt;Vertical Slide 2-3&lt;/div&gt;
                      &lt;div class="swiper-slide"&gt;Vertical Slide 2-4&lt;/div&gt;
                      &lt;div class="swiper-slide"&gt;Vertical Slide 2-5&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="swiper-pagination swiper-pagination-v2"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Add Pagination --&gt;
      &lt;div class="swiper-pagination swiper-pagination-h"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Basic Styling</strong></p>
  
  <pre><code>html, body {
      position: relative;
      height: 100%;
      margin: 0;
      padding: 0;
  }
  .swiper-container {
      width: 100%;
      height: 100%;
  }
  .swiper-slide {
      background: #eee;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var swiperH = new Swiper('.swiper-container-h', {
      pagination: '.swiper-pagination-h',
      paginationClickable: true,
      spaceBetween: 50,
      effect: 'fade' // DELETING THIS LINE REMOVES THE ISSUE
  });
  var swiperV = new Swiper('.swiper-container-v', {
      pagination: '.swiper-pagination-v',
      paginationClickable: true,
      direction: 'vertical',
      spaceBetween: 50,
      effect: 'fade'
  });
  var swiperVTwo = new Swiper('.swiper-container-v2', {
      pagination: '.swiper-pagination-v2',
      paginationClickable: true,
      direction: 'vertical',
      spaceBetween: 50,
      effect: 'fade'
  });
  </code></pre>