Swiper Dynamic height

by bizamajig

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.0/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.0/css/swiper.min.css">
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="http://placehold.it/750x550/ff3300/000000" alt="" />
        </div>
        <div class="swiper-slide">
            <img src="http://placehold.it/750x550/000000/ffffff" alt="" />
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

CSS

html, body {
    position: relative;
}
.swiper-container { 
    /* height:500px; */ /* This solution causes gaps because the images are resized */
    height:auto; 
}
.swiper-slide {
    height: auto;
}
img {width:100%; }

JavaScript

function resizeSwiper() {
    $('.swiper-container').height($('.swiper-slide img').height())
}
$('.swiper-container').each(function(){
   // Hero swiper  
   var mySwiper = new Swiper ('.swiper-container', {
     direction: 'vertical',
     loop: true,
     pagination: '.swiper-pagination',
     nextButton: '.swiper-button-next',
     prevButton: '.swiper-button-prev',
     grabCursor: true,
     keyboardControl: true,
     speed: 1000,
     slidesPerView:1,
       onImagesReady: function (swiper) {
           resizeSwiper();
           swiper.onResize();
       }
   });
});
$(window).resize(function(){
    resizeSwiper()
});