CODEWITHSUNDEEP
javascripthtmlswiper.js
ryush00
ryush00

Reputation: 482

Swiper height auto resize

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.

Upvotes: 21

Views: 141669

Answers (2)

AbHi
AbHi

Reputation: 119

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%;
}

Upvotes: 1

Erfan
Erfan

Reputation: 1192

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

Upvotes: 50

Related Questions