SO38453377

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bxSlider Resize</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<style>
img { margin: 0 auto; display: block; } /* Ruleset makes img centered. */
</style>
</head>

<body>
<ul class='bx'>
  <li>
    <img src="http://placehold.it/640x480/000/fff?text=1">
  </li>
  <li>
    <img src="http://placehold.it/640x480/00f/fc0?text=2">
  </li>
  <li>
    <img src="http://placehold.it/640x480/fc2/222?text=3">
  </li>
  <li>
    <img src="http://placehold.it/640x480/cb9/0ff?text=4">
  </li>
  <li>
    <img src="http://placehold.it/640x480/fff/000?text=5">
  </li>
</ul>
<input id='cache' type='hidden'> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<!-- Results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<!-- console.min.js and the 3 console.logs facilitates debugging. 
//]  They are optional and are not essential for overall functioning.//-->
<script>

var bx = $('.bx').bxSlider({
	captions: true,
	// onResize 
	onSliderResize: reloadBX, 
	// onLoad
	onSliderLoad: checkBX
});

/*
Resize Callback 
*/// Stores the current slide index.
function reloadBX(idx) {
	localStorage.cache = idx;
	console.log('Reload on Slide: '+idx);
// Reloads slider, 
///goes back to the slide it was on before resize,
///removes the stored index.
	function inner(idx) {
		setTimeout(bx.reloadSlider, 0);
		var current = parseInt(idx, 10);
		console.log('RELOADED');
		bx.goToSlide(current);
		localStorage.removeItem("cache");
	}
}

/*
Load Callback
*/// If the slider height is collapsed, 
/////invoke a repaint and stay on current index.
function checkBX(idx) {
	var vp = $('.bx-viewport').height();
	console.log('View-port Height: '+vp+'px');
	while(vp <= 0) {
		 bx.redrawSlider();
		 console.log('REPAINT');
	}
	bx.goToSlide(idx);
}
	
</script>
</body>
</html>