JQuery Swiper滑动高度

Question

我正在使用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？

这是我所追求的一个例子

非常感谢

Answer 1

似乎JSFiddle可能在适应Swiper时遇到一些麻烦.但这是你小提琴的一个分支.但是,它在XAMPP服务器上运行良好,我也将它移动到了一个实时站点.

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