Setting the correct height in vertical mode in Swiper

Question

It's been days that I'm working on setting the swiper in my application but I still no luck and found no working sample anywhere from here to the Github issues or elsewhere on the net.

I can not set a dynamic height for the swiper in vertical mode via none of the suggested solutions to this problem.

I have several images as slides that give a height of thousands of pixels but if I switch it to a text it is fine as the height of the text is like 10 px. Any div above a certain height will result in abnormal height.

I found that the suggested CSS does not work as it just limits the height of the window and is very unpleasant as the pictures are cut off.

The js solutions are the correct way to do it but I can not find a working solution and the ones that I have tried all result in half of the job solutions.

It seems the correct way uses the onSlideChangeStart to correct the next slide height like below but this does not work as the swiper of the vertical is not recognized in its own settings.

onSlideChangeStart: (swiper)->
$(swiper.slides).each ->
    $(this).css height: if $(this).index() != swiper.activeIndex then 0 else 'auto'

I tried to use the active class instead of the API as it is not working when calling even the swiperV.activeIndex in its own onSlideChangeStart like below but swiper-slide-active is not defined.

This is my settings for the 3 nested sliders.

    var swiperVV = new Swiper('.swiper-container-vv', {
        direction: 'vertical',
        updateOnWindowResize: true,
        grabCursor: true,
        loop: true,
        mousewheel: true,
        lazy: true,
        zoom: true,
        effect: 'slide',
        spaceBetween: 0,
        pagination: {
            el: '.swiper-pagination-v',
            clickable: true,
        }, 
    });
    var swiperH = new Swiper('.swiper-container-h', {
        initialSlide:0,
        spaceBetween: 0,
        autoHeight: true,
        updateOnWindowResize: true,
        grabCursor: true,
        loop: true,
        parallax: true,
        lazy: true,
        effect: 'slide',
        pagination: {
            el: '.swiper-pagination-h',
            clickable: true,
        },
        scrollbar: {
            el: '.swiper-scrollbar',
            hide: true,
        },
    });
    var swiperV = new Swiper('.swiper-container-v', {
        direction: 'vertical',
        autoplay: {
            delay: 5000,
        },
        autoHeight: true,
        updateOnWindowResize: true,
        grabCursor: true,
        loop: true,
        mousewheel: true,
        lazy: true,
        zoom: true,
        effect: 'slide',
        spaceBetween: 0,
        pagination: {
            el: '.swiper-pagination-v',
            clickable: true,
        },
        slideChange: resizeSwiper()
    });

    function resizeSwiper() {
        console.log($('.swiper-container-v .swiper-slide swiper-slide-active').height());
        $('.swiper-container-v, .swiper-container-v .swiper-slide').css({ height: $('.swiper-container-v .swiper-slide .swiper-slide-active').height() });

    }

i have gone through all the samples of suggested users like the ones listed below in github, stackoverflow and codepen. https://github.com/nolimits4web/swiper/issues/48 https://github.com/nolimits4web/Swiper/issues/153

Belisle

Answer 1

This is the workaround worked for me

 if (typeof Swiper != "undefined"){
  var popularSwiper = new Swiper(".popularSwiper", {
    direction: "vertical",
    autoHeight: true,
    autoplay: {
      delay: 5000,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    on:{
      init:function(){
        setSlideHeight(this);
      },
      slideChangeTransitionEnd:function(){
        setSlideHeight(this);
      }
    }
  });

  function setSlideHeight(that){
    $('.swiper-slide').css({height:'auto'});
        var currentSlide = that.activeIndex;
        var newHeight = $(that.slides[currentSlide]).height();

        $('.swiper-wrapper,.swiper-slide').css({ height : newHeight })
        that.update();
   }
 }


  

Jimmyjimsonweed

Answer 2

In my case, passing the value autoHeight: true, as parameter on JS and simple CSS:

.swiper-slide {
    height: auto !important;
}

fixed the auto height issue. The slider wrapper will adapt its height to the height of the currently active slide.

Truculent

Answer 3

It's working for me.

1. calculate the total height of the swiper container including gap between slides.
2. then set the swiper container height to the previously calculated height

let pdpThumb = new Swiper('#pdp-thumbCarousel', {
            slidesPerView: 4,
            direction: 'vertical',
            spaceBetween: 10,
            freeMode: true,
            loop: true,
            on: {
                init: (swiper) => {
                    let totalGap = swiper.passedParams.spaceBetween * (swiper.passedParams.slidesPerView - 1);
                    let containerHeight = swiper.passedParams.slidesPerView * swiper.slides[0].clientHeight + totalGap;
                    swiper.el.style.height = containerHeight + 'px';
                },
            },
        });

Licentious

Answer 4

You have to set the height for the the .swiper class to 100% and also create a parent for the .swiper and give it your desired height (the height you want your slide to have).

.ref-sec-hero {
   height: 883px;
}

.swiper {
    width: 100%;
    height: 100%;
}

In this case you have to give a parent to your swiper like:

<section className="ref-sec-hero">
                <Swiper 
                    direction={'vertical'}
                    pagination={{
                        clickable: true,
                    }}
                    modules={[Pagination]}
                    className="mySwiper">

                    <SwiperSlide>slide 1</SwiperSlide>
                    <SwiperSlide>slide 2</SwiperSlide>

                </Swiper>
</section>

Cuirass

Answer 5

The best solution

var swiper = new Swiper(".js-widgetHonorBoardSlider", {
  direction: "vertical",
  autoHeight: true,
  slidesPerView: 'auto',
  spaceBetween: 16,
  watchSlidesProgress: true,
  watchSlidesVisibility: true,
  mousewheel: true,
  navigation: {
    nextEl: ".swiper-honour-button-prev",
    prevEl: ".swiper-honour-button-next",
  },
});

Sinistrocular

But why do you believe this is this the best solution? It would be useful to explain how your approach is different than the other answers, or under what circumstances your approach might be preferred. Can you kindly edit your answer to offer an explanation? – Cleistogamy

Answer 6

setting height:100% to the container and

autoHeight: true,
slidesPerView: 'auto',

props worked very well.

<div className="h-full">
<Swiper
        direction={'vertical'}
        pagination={{
          clickable: true,
        }}
        autoHeight: true,
        slidesPerView: 'auto',
        modules={[Pagination]}
        className="mySwiper"
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
</div>

Intercede