Swiper height auto resize

Question

I have added swiper code in [REMOVED].

my code 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 blank space.

Please see image.

I want to remove this space.

Keesee

Try To Create Fiddle.net – Cornuted

Answer 1

Update:

As passatgt mentioned in the comments for newer versions calculateHeight is replaced with 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 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')  
    }
  })

Anatomist

For newer swiper versions, you need to use autoHeight: true – Melissa

The autoHeight fixed a lot of wierd configs haha! Thanks :D – Iatrochemistry

Answer 2

I'm using it like this

//import these 2 for pagination css

import 'swiper/css';

import 'swiper/css/pagination';

 <Swiper
                autoHeight={true}
                spaceBetween={30}
                pagination={{
                    clickable: true
                }}
                direction={'horizontal'}
                mousewheel={{ forceToAxis: true }}
                modules={[Pagination, Mousewheel]}
                className={'mySwiper'}
            >
                {images?.map((img, index) => (
                    <SwiperSlide key={index}>
                        <div key={index}>
                            <img src={img} className="h-auto w-[-webkit-fill-available] " />
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>

//css file

.mySwiper > div:nth-child(1) {
    margin-bottom: 10%;
}

Viccora