Change adjust the height in bxSlider

Question

I'm trying to change the bxslider height adjustment for percentage rather than pixel, but I'm a bit lost about it.

I found in the code line that makes this adjustment:

slider.viewport.css('height', getViewportHeight());

and here, set the viewport height

 slider.viewport.height(getViewportHeight());

accurate results in css percentage because used responsive layout

thanks.

Answer 1

When I was encountering problems with bxSlider's height being cutoff at loading, I wrote a quick patch that basically removes the height property and attribute of .bx-viewport which allowed my CSS rule to override the height to whatever I wanted. That script is the last block. I commented it out because you may not need it.

• I didn't know if you wanted a carousel of multiple slides or whether you wanted it to slide horizontally or vertically since the demo wasn't functioning. So I made it a 1 slide vertical carousel.

• I enabled adaptiveHeight to show you it's dynamic capabilities with height, by default bxSlider just stays at the size of the tallest slide.

• All of these features are options and as they are options that makes them optional...optionally.

• There's 2 styles included but disabled. The first one is used if you want to use that height fix script. The second rule id to move the control arrows to the top. If you like the slider in vertical mode then you'll most likely want have your arrow controls at the top. If set at the default position in the middle, it'll jump every time there's a change in height.

Fiddle

Snippet

$(document).ready(function() {
  var bx = $('.bxslider').bxSlider({
    mode: 'vertical',
    adaptiveHeight: true,
    adaptiveHeightSpeed: 750,
    slideWidth: 400,
    minSlides: 1,
    maxSlides: 1,
    moveSlides: 1
  });
});

/*
document.documentElement.addEventListener('DOMContentLoaded', function(event) {
  event.stopPropagation();
  var tgt = document.querySelector('.bx-viewport');
  //tgt.removeProperty('height');
  //tgt.removeAttribute('height');
  //tgt.setAttribute('height', '100%');
}, false);
*/

img {
  display: block;
  margin: 0 auto
}
/*
.bx-viewport {
  height:90vh !important;
  }
*/
/*
.bx-controls a {
   top:.05% !important;
}
*/

<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>


<div class="bxslider">
  <div>
    <iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video1"></iframe>
  </div>
  <div>
    <img src="http://placehold.it/350x666?text=350x666.png" id="image2">
  </div>
  <div>
    <iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video3"></iframe>
  </div>
  <div>
    <img src="http://placehold.it/350x350?text=350x350.png" id="image4">
  </div>
</div>