Bxslider Setting Height

bxSlider - height and width settings

What about slideWidth property, from page with bxslider options

The width of each slide. This setting is required for all horizontal carousels!

Like this:

$('.bxslider').bxSlider({
   mode: 'fade',
   captions: true,
   pagerCustom: '#bx-pager',
   adaptiveHeight: true,
   slideWidth: 150
});

Added:

.bx-wrapper img {
    margin: 0 auto;
}

Change adjust the height in bxSlider

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>

Viewport height is not setting correctly in bxslider jquery plugin

If there are changes to how your page loads, say like adding an extra plugin, bxSlider will fail to finish it's calculations and it won't complete it until there's a repaint. Typically done by making the bxSlider move next or prev. I fixed this behavior by forcing bxSlider to recalculate while loading. Here's 2 suggestions, the first one is passive and minimal, the second one is aggressive and excessive. I suggest try the first one by itself and if it doesn't work, use both of them together.

Fix #1. Add the following ruleset to either the bottom of your stylesheet, or the last line of a <style> block:

.bx-viewport.bx-viewport { min-height: 90vh !important; }

This doubling up on the class selector might look odd, but it will increase the selector's selectivity, the !important is optional as is the double selector. This is the Fix #1 down to it's essentials:

.bx-viewport { min-height: 90vh; }

Fix #2. Place this JS before the closing </body> tag:

document.documentElement.addEventListener('DOMContentLoaded', function(event)  {
    var $tgt = $('.bx-viewport')[0];
    var tgt = document.querySelector('.bx-viewport');
    tgt.style.height = ""
    tgt.removeAttribute('height');
    tgt.style.removeProperty('height');
    $tgt.css('height', '');
    $tgt.removeAttr('height');

}, false);

Most of the time using Fix #1 will be enough. Fix #2 is excessive but it always works.

Bx Slider increase the height of the div

This fixed the issue.

.bx-viewport {
    height: 100% !important;
 }

It works because it's a child of the first div so it "inherits" the parent div's height.

bxSlider Images Custom Height and Width

bxslider has a responsive option you can set to false. This should stop resizing the slider.
Then you maybe could reload the slider with reloadSlider() on resize() so it would show less images.

like: http://jsfiddle.net/Lhz7qbzc/

Controling height of bxslider and bxsldier-pager

The bxsilder code calculates the height of the tallest image in its children. If you correctly size your images using something like Photoshop you should not have to modify the height at all.

Here is a snippet from the bxslider source code.

// if not "vertical" mode, calculate the max height of the children
height = Math.max.apply(Math, children.map(function() {
  return $(this).outerHeight(false);
}).get());

https://github.com/stevenwanderski/bxslider-4/blob/master/src/js/jquery.bxslider.js

Update size of content slider on resize in bxslider

During re-size event get the current slide and set it as the start slide.
Also create settings object to configure the bxslider.

var settings ={
 //pagerCustom: '.bx-pager',
  adaptiveHeight: true,
  adaptiveHeightSpeed: 1000,
  //mode: 'slide',
  //useCSS: false,
  infiniteLoop: false,
  hideControlOnEnd:true,
  easing: 'easeInOutExpo',
  //video: true,
  speed: 1000,
  autoHover:true,
  responsive:true,
  //preloadImages:all,
  //pager:false,
  //controls:false,
  //auto:true,
  pause:3000,
  //nextSelector: '#slider-next',
  //prevSelector: '#slider-prev',
};
var callSlider = $('.main-slider').bxSlider(settings);

$(window).resize(function(){ 

 settings.startSlide = callSlider.getCurrentSlide();
    callSlider.reloadSlider(settings);

});