bxsliderの.bx-viewportの高さ0を解消したいです。

Question

###前提・実現したいこと
Wordpressのカスタムフィールドを使用し、
画像、キャプションを投稿したものを出力先でスライドとして表示させたいです。
PC時カルーセル（画面表示3枚）

###発生している問題・エラーメッセージ
カルーセルのスライドは、bxsliderを使用しましたが、
.bx-viewportのstyleにheight:0がかかっており、高さが表示されません。
画面幅を変更すると、画像、キャプションが表示されます。

###html

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="detail_slide pc">
<ul class="bxslider">
	<li>
	<figure>
	<?php if(post_custom('detail_slide01')): ?>
       	<?php if(get_field('detail_slide01') ): ?>
           <img src="<?php the_field('detail_slide01'); ?>" alt="" />
       	<?php endif; ?>
       	<?php else:?><?php endif;?>
	</figure>
	<figcaption>
	<?php if(get_field( "detail_slide01_txt" )): ?>
	<p><?php the_field( "detail_slide01_txt" ); ?></p>
	<?php endif; ?>
	</figcaption>
	</li>
	<li>
	</li>
</ul>
</div>	

###jquery

jQuery(document).ready(function(){
    jQuery('.bxslider').bxSlider({
        mode: 'horizontal',
        controls: false,
        pager: true,
        auto: true,
		slideWidth: 270,
    	minSlides: 3,
    	maxSlides: 3,
    	moveSlides: 1,
    	slideMargin: 50
    });
});

###試したこと
最初に読み込んだ際に、高さが取得できていないのが原因だと思った為、
下記の方法で画像取得するよう試してみたのですがjQuery初心者で、自力では解決できませんでした。
ご教授いただけましたら幸いです。

jQuery(window).load(function(){
  var height = $(this).height();
   $( ".bx-viewport" ).css( "height", '50%' );
});

###補足情報(言語/FW/ツール等のバージョンなど)
jquery-1.8.3.min
WordPress 4.6.1
Advanced Custom Fields 4.4.8
bxslider 4.1.2

Answer 1

jQuery(window).load(function(){
  var height = $(this).height();
   $( ".bx-viewport" ).css( "height", '50%' );
});

上記の'50%'を単純にpx指定で設定すると表示されました。