How to force the swiper to be a full height slider?


Based on this swiper:

I want to set it to be stretched to the full page’s height, so it will be looking just as a good looking walkthrough.

Is this possible?


Just set width: 100%; height: 100% to Swiper element rather with style attribute/prop or in CSS


Can you show please the full code of the tag?

<Swiper style={{ width: '100%', height: '100%' }} ...


Okay it works thanks, how to place the text in the middle of the slide? I mean, vertical allign middle and center? BTW, shouldn’t it be by default?


You need to add extra classes or styles to swiper slide to achive that.