Swiper ( height issue – multiple swiper – vertical direction )

Question

I would like to ash here a question, which I asking already in the developers forum of swiper, too. So don't be confused. If a solution is/was found, I will close/mark both.

At the moment I want for a project a horizontal scrolling sidebar and a vertical scrolling footer. (Swiper based) But see self what happens if you switch from horizontal (1) footer to a vertical (2) one.

Video 1 (direction both horizontal - not wanted)

Video 2 (footer direction vertical, wanted! - not works)

As you can see, on the simplified example (Video 2): If I use direction:vertical on the second swiper-container it breaks the result. Where the HEIGHT of "swiper-slide" should be 226px, appears now a HEIGHT of 2408px and a MARGIN-BOTTOM of 100px.

I really can't understand what's going wrong here.

ConfInit

var swiper = [];
    $('.swiper-container').each(function(index){

        var $el = $(this);

        var sParams = [{
                speed: 400,
                spaceBetween: 100,
                allowSwipeToNext: false, // for event controlled swipes 
                allowSwipeToPrev: false  // for event controlled swipes 
            },
            {
                speed: 400,
                spaceBetween: 100,
                allowSwipeToNext: false, // for event controlled swipes 
                allowSwipeToPrev: false, // for event controlled swipes 
                direction: 'vertical'
            }
        ];

Answer 1

I have faced the same issue, solved by adding height: 100vh declaration to swiper container.

Finding

• height property is must

NOTE: % does not work