Не отрисовывается bxslider

Проблема такая - есть popup, реализованный с помощью fancybox и в нем есть слайдер bxslider. Так как он не работает если у родительского блока стоит display: none, то подключаю его после открытия окна.

$('[data-fancybox]').fancybox({
		autoFocus : false,
		afterShow : function( instance, current ){
			$('.bxslider').bxSlider({
				mode: 'fade',
				pager: true,
				controls: false,
				adaptiveHeight: true
			});
		}
	});

так же указываю adaptiveHeight: true так как слайдер растягивается по ширине и картинки меняют размер. И теперь слайдер не отображается пока не перейти на следующий слайд. То есть открываем popup и видим только навигацию слайдера, а картинок нет. Как оказалось проблема в том, что для мобильных устройств нужно сжимать popup и в css прописано:

.bxslider img{
height: auto;
max-width: 100%;
}

Если убрать height: auto; то слайдер нормально отрисовывается, но картинка искажается. Как это обойти?