title: Why did the swiper-wrapper get ended up so big?
body: <p>I use <a href="https://idangero.us/swiper/" rel="nofollow noreferrer">swiper.js</a>.<br>
  Below, there is the actual demo site.  </p>
  
  <hr>
  
  <h2>Problem</h2>
  
  <p>There is a mystery gap below..  </p>
  
  <p><a href="https://i.stack.imgur.com/2QhmV.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2QhmV.gif" alt="like this"></a>  </p>
  
  <hr>
  
  <p><a href="https://i.stack.imgur.com/olzYG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/olzYG.png" alt="this"></a>  </p>
  
  <p>This turned out to be probably due to <code>swiper-wrapper</code> or <code>swiper-slide</code>,<br>
  but why did this happen?  </p>
  
  <p>How to this fit the element? (How can I fix this space?)  </p>
  
  <hr>
  
  <h2>Demo site</h2>
  
  <p>Real site is <a href="https://mqs2.com/problemPage/problem.html" rel="nofollow noreferrer">here</a>  </p>
  
  <p><a href="https://jsfiddle.net/__R2D2/0zheL29w/3/embedded/result/" rel="nofollow noreferrer">JSFiddle (fullscreen)</a><br>
  <a href="https://jsfiddle.net/__R2D2/0zheL29w/3/" rel="nofollow noreferrer">JSFiddle</a>  </p>
  
  <p>Could you please give me a hand?  </p>
  
  <hr>
  
  <h2>Add: Current status</h2>
  
  <p>▼ If I change the width or height of the browser, it will be ended up covered with the next slide.  </p>
  
  <p><a href="https://i.stack.imgur.com/Xl2Bo.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xl2Bo.gif" alt="like this"></a><br>
  <a href="https://i.stack.imgur.com/UmByN.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UmByN.gif" alt="like this"></a>  </p>
  
  <p>▲ When I checked with the developer tool of Chrome, it turned out that the height of the contents part is very large. (It may be easy to understand if you look at the bottom of gif.)  </p>
  
  <p>How can I eliminate the extra height at the bottom of the contents?</p>