JQuery Swiper 滑动高度

Question

我正在使用 JQuery Swiper .我基本上有一个部分，我将高度设置为视口(viewport)高度。

#portfolio {
  height: 100vh;
}

在此部分中，我有一个左侧和一个右侧，我将其设置为 100%

#portfolio-left {
    background: #6bbea5 none repeat scroll 0 0;
    height: 100%;
}

#portfolio-right {
    height: 100%;
    padding: 0;
}

#portfolio-left 将只容纳一些文本，而 #portfolio-right 将容纳我的 slider 。

所以我已经添加了我的 slider 容器，以及我想要添加到 slider 的内容。然后我设置它

$(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
    });
});

它最终将是双向的，因此我有垂直和水平的原因。我垂直添加了两张幻灯片来演示我的问题。本质上，第一张幻灯片有很多内容，并且没有被赋予动态高度。我相信这与在投资组合中给予它 100% 的高度有关——对，但不太确定。我已经设置了一个 JSFiddle进行演示。

如何让幻灯片具有自动高度，同时让整个部分为 100vh？

这是我所追求的一个例子

非常感谢

Answer 1

似乎 JSFiddle 在适应 Swiper 时遇到了一些麻烦。但这里有一个 fork of your fiddle .但是，它在 XAMPP 服务器上运行良好，我将其移至 live site。

  $(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,
     slidesPerView: 'auto'        
  });
});  

注意添加“slidesPerView: 'auto'”

最新版本的 Swiper

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>