Swiper: vertically center slides

[thenewguy]

Unless I am doing something incorrectly, it doesn't appear that slides are vertically centered in the container when slides vary in height.

[thenewguy]

Something simple like the following onSlideChangeStart seems to do the trick:

            function verticallyCenterSlide(api) {
                var activeSlide = api.slides[api.activeIndex];
                var top = ($(api.container).height() - $(activeSlide).height()) / 2;
                $(activeSlide).css("top", ""+top+"px");
            }

[thenewguy]

But it would be nicer if it was calculated in the transform as a real solution

[nolimits4web]

Do you mean centeredSlides: true parameter?

[thenewguy]

centeredSlides: true seems to do horizontal centering but not vertical centering.

[nolimits4web]

This is for vertical direction. Otherwise you may just add this CSS:

.swiper-wrapper {
  align-items: center; /* add this will all relevant prefixes */
}

[thenewguy]

Great! thanks. Seems I am behind the times with my css.

[koedev]

align-items on the .swiper-wrapper doesn't work for me with the current version. But on .swiper-slide it did the trick ;)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.