Sapphire height automatically changes

Question

I added the swiper code to [REMOVED].

my code is like here

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

They have empty space.

See image.

I want to remove this space.

Answer 1

Update:

As indicated in the comments on newer versions, calculateHeight is replaced by autoHeight , here you can find an example:

 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', }, }); 

---

Add calculateHeight:true to the swiper definition.

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