How to set a height of the slider

Hi,

yes there is the option “adaptiveHeight” that should be set to false in your case: https://bxslider.com/options

hello,

I did tried that – when I select this option pictures unfortunately look much higher – when this option is not selected pictures have more natural size ie are in horizontal view not vertical.

This option causes picture to have vertical view

Thanks
Martin

I think adaptiveHeight may work however I need to amend the code which is generated dynamically by plugin

<div class=”bx-viewport” style=”width: 100%; overflow: hidden; position: relative; height: 500px;”

By default the height is set to 500px – how do I change it to different value ie 300px

Thanks for your help

I’m having (what I think is) the same problem. When “adaptiveHeight” is set to false, the slider images appear squashed in width on small screens.

We’re using an ugly CSS + jQuery workaround. I don’t know if this will work for anyone else, but it does the job for us and allows the images and entire slider to scale properly.

In our CSS, we over-ride the img height that the plugin sets using this:

.bx-wrapper img {height: auto !important; max-height: 500px;}

I imagine that you could also give a different value, such as 300px.

That allows the images to scale down proportionally, but the viewport still gets messed up. So we use this jQuery to check the screen size and make adjustments:

jQuery(function ($) {
	/* You can safely use $ in this code block to reference jQuery */

$(document).ready(function(){
	// if there is a slider...
	if (".bxslider-gallery") {
		// get the width of the viewport...
		var bxviewportWidth = $(".bx-viewport").width();
		//// *the "bxSlider Integration for WordPress" plugin sets a height of 500px for the images in the slider;*
		//// *this causes problems with responsive designs if the "adaptiveHeight" option is set to false.*
		//// *In our CSS, we have overridden that with this: .bx-wrapper img {height: auto !important; max-height: 500px;}*
		// Enter the number that we use for the img max-height here...
		var imgMaxHeight = '500';
		// Check to see if the viewport is narrower than the max-height that we have set for images...
		if (bxviewportWidth < imgMaxHeight) {
			// If it is, we change the max-height of both the viewport and the image to fit into the smaller, square viewport...
			$(".bx-viewport, .bx-wrapper img").css("max-height", bxviewportWidth);
			// We also have trouble with the display of the pager on smaller screens so we adjust for that too...
			$(".bx-pager").css("bottom", "-70px");
		}
		// We also check and change these settings when the browser window is re-sized...
		$(window).resize(function() {
			var bxviewportWidth = $(".bx-viewport").width();
			if (bxviewportWidth < imgMaxHeight) {
				$(".bx-viewport, .bx-wrapper img").css("max-height", bxviewportWidth);
				$(".bx-pager").css("bottom", "-70px");
			} else {
				$(".bx-viewport, .bx-wrapper img").css("max-height", imgMaxHeight);
				$(".bx-pager").css("bottom", "-30px");
			}
		});
	}
})

}); // end jQuery function $

You can see that here:
https://www.katherinesolomon.com/petportraits

If anyone can suggest a better way or an improvement in this code, please do!