Swiper高度自动调整大小

ryu*_*h00 7 html javascript swiper

我在[REMOVED]中添加了滑动代码.

我的代码就像这里

<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>
Run Code Online (Sandbox Code Playgroud)

他们有空白.

请看图片.

我想删除这个空间.

Erf*_*fan 12

更新:

由于更新版本的注释中提到的passatgt calculateHeight被替换为autoHeight,在这里您可以找到一个示例:

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',
  },
});
Run Code Online (Sandbox Code Playgroud)

添加calculateHeight:true到swiper定义.

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

  • 对于较新的 swiper 版本,您需要使用 autoHeight: true (4认同)