2014-09-20 1470 views
5

我在[REMOVED]中添加了swiper代碼。Swiper高度自動調整大小

我的代碼喜歡這裏

<div class="swiper-container"> 
    <div class="swiper-wrapper"> 
     <!--First Slide--> 
     <div class="swiper-slide" id="swiper-slide"> 
      <div class="content-slide"> 
       content1 
      </div> 
     </div> 
     </div> 
     <!--Second Slide--> 
     <div class="swiper-slide" id="swiper-slide"> 
      <div class="content-slide"> 
       content1 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

他們有空格。

Please see image.

我想刪除此空間。

+0

嘗試創建Fiddle.net – Sam1604 2014-09-20 08:59:29

+0

可以分享css – himanshu 2014-09-20 09:06:03

回答

11

更新:

正如評論較新版本calculateHeight提到passatgt被替換autoHeighthere你可以找到一個例子:

var swiper = new Swiper('.swiper-container', { 
    autoHeight: true, //enable auto height 
    spaceBetween: 20, 
    pagination: { 
    el: '.swiper-pagination', 
    clickable: true, 
    }, 
    navigation: { 
    nextEl: '.swiper-button-next', 
    prevEl: '.swiper-button-prev', 
    }, 
}); 

添加calculateHeight:true到刷卡的定義。

var tabsSwiper = new Swiper('.swiper-container',{ 
    speed:300, 
    calculateHeight:true, 
    onSlideChangeStart: function(){ 
     $(".tabs li").removeClass('active') 
     $(".tabs li").eq(tabsSwiper.activeIndex).addClass('active') 
    } 
    }) 
+0

非常感謝! – ryush00 2014-09-21 09:15:23

+0

對於較新的swiper版本,您需要使用autoHeight:true – passatgt 2017-11-03 11:14:51