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
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>