bxSlider adaptive height doesn't work on first load page

Question

i'm using bxSlider 4.1.2, each slide has different height (contains paragraphs and images), so i add the option adaptiveHeight:true based on bxSlider AdaptiveHeight. when first load page, the slider's height following the tallest slider, so it looks like a long gap between first slide and the controller buttons. like this :

i want my slider in first load is looks like this :

i'm calling the bxSlider in $(document).ready(); event , i was trying using event $(window).load(); but it brokes my slider :(

this is my javascript now

$(document).ready(function ()
{
slider_custom1 = $('#slider_brand1').bxSlider({
controls: true,
autoControls: true,
adaptiveHeight: true,
pagerCustom: '#custom_bullets1',
nextSelector: '#slider-next1',
prevSelector: '#slider-prev1',
nextText: '<img src="<?php echo base_url('webroot/images/next_detail_product.png');?>" />',
prevText: '<img src="<?php echo base_url('webroot/images/prev_detail_product.png');?>" />'
});
});