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

The autoHeight option is for the slider container itself, not the individual slides. It could be easier to make the slider work how you want it, show us that in a fiddle, then we can figure out how to make it stretch to the full height of the viewport. — Whothehellisthat
Hi, I added a JSFiddle to the original post. What I am trying to do is make each individual slide have an automatic height so it can contain all of its content — katie hudson
I know the answer, and have got it working for the first slide. Though the structure of each slide is a bit complex, so I'm having trouble fixing the fiddle completely. When you use height:100%, it takes the height of the parent element. But if no height is set on the parent element, it won't find a height to use. You need to add height:100% all the way up the chain until the wrapper, so that the wrapper's height can filter back down. Have a look here and let me know if it's heading in the right direction. — Whothehellisthat

iMarketingGuy iMarketingGuy · Accepted Answer · 2016-12-23T20:50:31

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>

JQuery Swiper slide height

2 Answers