Bxslider 4 полноэкранный режим на мобильных устройствах: Как сохранить родную вертикальную прокрутку страницы (вверх, вниз), но сохранить горизонтальную функциональность касания (влево, вправо)?

следующий фрагмент должен продемонстрировать проблему довольно хорошо:

(function ($) {

    $('.bxslider').each(function() {
        var bxid = $(this).attr("data-bxid");

        var bx = $(this).bxSlider({
            auto: false,
            autoStart: false
        });
    });

})(jQuery);

/* Styles */
#before, #after {
  width:350px;
  height:350px;
  background-color:#ccf;
}

/* BXSlider */
.bx-wrapper {
  position: relative;
  margin-bottom: 60px;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.bx-wrapper img {
  max-width: 100%;
  display: block;
}

.bxslider {
  background-color:#eee;
  margin: 0;
  padding: 0;
  /*fix flickering when used background-image instead of <img> (on Chrome)*/
  -webkit-perspective: 1000;
}

ul.bxslider {
  list-style: none;
  width:100%;
}

ul.bxslider li {
   width:100%;
}

.bx-viewport {
  /* fix other elements on the page moving (in Chrome) */
  -webkit-transform: translateZ(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<div id="before"></div>
<ul class="bxslider">
<li><p>If you touch me vertically ...<img src="https://via.placeholder.com/500x350"></li>
<li>... I want to scroll down normally ...<img src="https://via.placeholder.com/500x250"></li>
<li>... but nothing happens