JQuery Swiper slide height

Question

I am using JQuery Swiper. I essentially have a section where I set the height to the viewport height.

#portfolio {
  height: 100vh;
}

Within this section, I have a left side and a right side, which I set to 100%

#portfolio-left {
    background: #6bbea5 none repeat scroll 0 0;
    height: 100%;
}

#portfolio-right {
    height: 100%;
    padding: 0;
}

#portfolio-left will just hold a little text, while #portfolio-right will hold my slider.

So I have added my slider container, and the contents I want added to the slider. I then set it up

$(function() {

     var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true
    });
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        freeMode: true,
        autoHeight: true,
        grabCursor: true
    });
});

It will eventually be bi-directional hence the reason I have vertical and horizontal. I have added two slides vertically to demonstrate my issue. Essentially, the first slide has a lot of content, and it is not being given a dynamic height. I believe this has something to do with giving it 100% height on the portfolio-right, but not too sure. I have set up a JSFiddle to demonstrate.

How can I get the slides to have an auto height, whilst at the same time having the whole section 100vh?

This is an example of what I am after

Many thanks

Answer 1

It seems like JSFiddle is might be having a little trouble adapting to Swiper. But here is a fork of your fiddle. However, It works perfectly on XAMPP server and I moved it to a live site as well.

  $(function() {
     var swiperH = new Swiper('.swiper-container-h', {
     pagination: '.swiper-pagination-h',
     paginationClickable: true,
     });

     var swiperV = new Swiper('.swiper-container-v', {
     pagination: '.swiper-pagination-v',
     paginationClickable: true,
     direction: 'vertical',
     freeMode: true,
     autoHeight: true,
     grabCursor: true,
     slidesPerView: 'auto'        
  });
});  

Notice the addition of "slidesPerView: 'auto' "

Most recent version of Swiper

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>

Answer 2

Man, I've refactored the CSS, considering the HTML hierarchy

See if this is what you need: JSFiddle

$(function() {
     var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true
    });
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        freeMode: true,
        autoHeight: true,
        grabCursor: true
    });
});

#portfolio {
  height: 100vh;
}

#portfolio-left {
  height: 100vh;
  background: #6bbea5 none repeat scroll 0 0;
}

#portfolio-right {
  height: 100vh;
  padding: 0;
}

.swiper-container {
  color: #000;
}

.swiper-wrapper {
  height: 100vh;
}

.swiper-slide {
  display: table;
}

.goldBG {
  background: #fabc2f;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.0/css/swiper.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.0/js/swiper.jquery.min.js"></script>

<section id="portfolio">
    <div class="col-lg-5 col-sm-5" id="portfolio-left">
        <div id="portfolio-title">
            <h2>Work</h2>
        </div>
    </div>

    <div class="col-lg-7 col-sm-7" id="portfolio-right">
        <div class="swiper-container swiper-container-h">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="swiper-container swiper-container-v">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide goldBG">
                                <div class="row addMargin">
                                    <div class="col-md-5 col-md-offset-1 vertical-center inner">
                                        <div class="content-holder-l">
                                            <p>French</p>
                                            <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
                                        </div>
                                    </div>
                                </div>
                                <div class="row addMargin">
                                    <div class="col-md-5 col-md-offset-1 vertical-center inner">
                                        <div class="content-holder-l">
                                            <p>French</p>
                                            <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
                                        </div>
                                    </div>
                                </div>
                                <div class="row addMargin">
                                    <div class="col-md-5 col-md-offset-1 vertical-center inner">
                                        <div class="content-holder-l">
                                            <p>French</p>
                                            <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
                                        </div>
                                    </div>
                                </div>
                                <div class="row addMargin">
                                    <div class="col-md-5 col-md-offset-1 vertical-center inner">
                                        <div class="content-holder-l">
                                            <p>French</p>
                                            <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix">
                            </div>
                            <div class="swiper-slide">
                                duyfghisdgfdshfsdygfuygdsufygsdgyudgsyfugsdyugf
                                <br> sdf
                                <br> sdfsdfsdfsd
                                <br> fsdfsdf sdfsdfsdf
                            </div>
                        </div>
                        <div class="swiper-pagination swiper-pagination-v"></div>
                    </div>
                </div>
                <div class="swiper-pagination swiper-pagination-h"></div>
            </div>
        </div>
    </div>
</section>