JQuery Swiper滑动高度

我使用 JQuery Swiper.我基本上有一个部分,我将高度设置为视口高度.

#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将保留我的滑块.

所以我添加了我的滑块容器,以及我想要添加到滑块的内容.我然后设置它

$(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？

这是我所追求的一个例子

非常感谢

似乎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="http://img.558idc.com/uploadfile/allimg/210615/222G362E-0.jpg"></script>