Question

179

Swiper height auto resize

rated 0 times [ 183] [ 4] / answers: 1 / hits: 104102 / 10 Years ago, sat, september 20, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kearaw

Add To Favorites

Follow

Total Points: 713

Total Questions: 94

Total Answers: 109

Location: Western Sahara

Member since Sun, Nov 22, 2020

4 Years ago

answered 10 Years ago janiajohnnad · Accepted Answer

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

    }

  })