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可能有一個小麻煩適應組隊，探索。但這是一個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： '自動'」

組隊，探索

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

Answer 2

男人，我已經重構了CSS，考慮到HTML層次

看看這是你所需要的一個例子： JSFiddle

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

#portfolio { 
 
    height: 100vh; 
 
} 
 

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

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

 
.swiper-container { 
 
    color: #000; 
 
} 
 

 
.swiper-wrapper { 
 
    height: 100vh; 
 
} 
 

 
.swiper-slide { 
 
    display: table; 
 
} 
 

 
.goldBG { 
 
    background: #fabc2f; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.0/css/swiper.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.0/js/swiper.jquery.min.js"></script> 
 

 
<section id="portfolio"> 
 
    <div class="col-lg-5 col-sm-5" id="portfolio-left"> 
 
     <div id="portfolio-title"> 
 
      <h2>Work</h2> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-lg-7 col-sm-7" id="portfolio-right"> 
 
     <div class="swiper-container swiper-container-h"> 
 
      <div class="swiper-wrapper"> 
 
       <div class="swiper-slide"> 
 
        <div class="swiper-container swiper-container-v"> 
 
         <div class="swiper-wrapper"> 
 
          <div class="swiper-slide goldBG"> 
 
           <div class="row addMargin"> 
 
            <div class="col-md-5 col-md-offset-1 vertical-center inner"> 
 
             <div class="content-holder-l"> 
 
              <p>French</p> 
 
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
             </div> 
 
            </div> 
 
           </div> 
 
           <div class="row addMargin"> 
 
            <div class="col-md-5 col-md-offset-1 vertical-center inner"> 
 
             <div class="content-holder-l"> 
 
              <p>French</p> 
 
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
             </div> 
 
            </div> 
 
           </div> 
 
           <div class="row addMargin"> 
 
            <div class="col-md-5 col-md-offset-1 vertical-center inner"> 
 
             <div class="content-holder-l"> 
 
              <p>French</p> 
 
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
             </div> 
 
            </div> 
 
           </div> 
 
           <div class="row addMargin"> 
 
            <div class="col-md-5 col-md-offset-1 vertical-center inner"> 
 
             <div class="content-holder-l"> 
 
              <p>French</p> 
 
              <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </div> 
 
          <div class="clearfix"> 
 
          </div> 
 
          <div class="swiper-slide"> 
 
           duyfghisdgfdshfsdygfuygdsufygsdgyudgsyfugsdyugf 
 
           <br> sdf 
 
           <br> sdfsdfsdfsd 
 
           <br> fsdfsdf sdfsdfsdf 
 
          </div> 
 
         </div> 
 
         <div class="swiper-pagination swiper-pagination-v"></div> 
 
        </div> 
 
       </div> 
 
       <div class="swiper-pagination swiper-pagination-h"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>