Failed to load bxslider responsive

I’m inconvenience when using Reload Code in Bxslider

The code in my footer.php is:

<script src="<?php bloginfo('template_url'); ?>/js/jquery.bxslider-rahisified.min.js" type="text/javascript"></script>

<script type="text/javascript">

	 $(document).ready( function() {

        $('#myslider').bxSlider({
          slideMargin: 0,
          autoReload: true,
          breaks: [{
          	screen:0,
          	slides:1,
          },{
          	screen:768,
          	slides:3
          }],
          pager:false,
          controls: true,
          nextText: '<img src="<?php bloginfo('template_url'); ?>/images/right.png"/>',
          prevText: '<img src="<?php bloginfo('template_url'); ?>/images/left.png"/>',
		  moveSlides: 1,
          infiniteLoop: true,
		  auto: true,
			onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
			    $('.bxslider li').removeClass('active-slide');
			    $('.bxslider li').eq(currentSlideHtmlObject+4).addClass('active-slide')
			  },
			  onSliderLoad: function () {
			    $('.bxslider li').eq(4).addClass('active-slide')
			}
        });

    });

</script>

Reload Code put in:

jQuery(document).ready(function () {
$('#myslider').bxSlider({
        slideMargin: 0,
          breaks: [{
          	screen:0,
          	slides:1,
          },{
          	screen:768,
          	slides:3
          }],
          pager:false,
          controls: true,
          nextText: '<img src="https://dpto:8888/wp-content/themes/dpto2015/images/right.png"/>',
          prevText: '<img src="https://dpto:8888/wp-content/themes/dpto2015/images/left.png">',
          moveSlides: 1,
          infiniteLoop: true,
			onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
			    $('.bxslider li').removeClass('active-slide');
			    $('.bxslider li').eq(currentSlideHtmlObject+4).addClass('active-slide')
			  },
			  onSliderLoad: function () {
			    $('.bxslider li').eq(4).addClass('active-slide')
			}
        });
     });

NOTE: Without the ‘$(document)’ … It does not work at all!

It turns out that the slide does not carry with 3 slides as it should, it seems that it does not calculate the “width” correctly and always carries four and part of the fifth slide.

How should be: https://pauloens.com/testes/certo.png
As opens: https://pauloens.com/testes/errado.png (this when I browse through the pages)

If I open the Developer Tools (firebug) on the page, only to open the slide corrects the width and back to normal operation.

Please if anyone can help me. I’ve tried everything! Even moved to the Owl Carousel 2.2 and the same error happens.

thank you.

https://www.ads-software.com/plugins/advanced-ajax-page-loader/