Slide Click when refreshing on the page

Question

I am using the plugin bxslide, however when I load the page it works normally, but when I give refresh, it saves the images appearing all slides, not from JS error, but when I change the page size even with it bugged it comes back to work normally.

I charge before closing the body

<script src="<%=ConfigurationManager.AppSettings("URL").ToString() %>/js/jquery.min.js"></script>
<script src="<%=ConfigurationManager.AppSettings("URL").ToString() %>/js/jquery.bxslider.min.js"></script>

after the above script comes the call:

jQuery(document).ready(function ($) {
            $('.bxslider').bxSlider({
                auto: true,
                minSlides: 1,
                maxSlides: 4,
                slideWidth: 300,
                speed: 1000,
                pause: 6000,
                slideMargin: 100
            });
        });

Then he shows up like this

after I manually resize the browser window it returns to normal

html buged slide code:

<div class="bx-wrapper" style="max-width: 1500px;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 0px;"><ul class="bxslider" style="width: 1015%; position: relative; transition-duration: 0s; transform: translate3d(-840px, 0px, 0px);"><li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">
                            
                                <img src="img/Home-Slider/130978001.jpg" alt="Gidesac Publicidade">
                            
                        </li><li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">
                            
                                <img src="img/Home-Slider/1308962.jpg" alt="Anita Depiladora Eletrólise e Depilação">
                            
                        </li><li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">
                            
                                <img src="img/Home-Slider/130593501.jpg" alt="Rede Sintonia">
                            
                        </li><li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">
                            
                                <img src="img/Home-Slider/131318301.jpg" alt="Marcos Estevam Duarte Climed">
                            
                        </li>
                
                        <li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;">
                            
                                <img src="img/Home-Slider/131228201.jpg" alt="Dedetizadora Borges">
                            
                        </li>
                    
                        <li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;">
                            
                                <img src="img/Home-Slider/130978305.jpg" alt="Ambientos">
                            
                        </li>
                    
                        <li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;">
                            
                                <img src="img/Home-Slider/131890902.jpg" alt="Cito Laboratório de Citopatologia Ltda">
                            
                        </li>
                    
                        <li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;">
                            
                                <img src="img/Home-Slider/130978304.jpg" alt="Detalhe Decorações">
                            
                        </li>
                    
                        <li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;">
                            
                                <img src="img/Home-Slider/130978001.jpg" alt="Gidesac Publicidade">
                            
                        </li>
                    
                        <li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;">
                            
                                <img src="img/Home-Slider/1308962.jpg" alt="Anita Depiladora Eletrólise e Depilação">
                            
                        </li>
                    
                        <li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;">
                            
                                <img src="img/Home-Slider/130593501.jpg" alt="Rede Sintonia">
                            
                        </li>
                    
                        <li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;">
                            
                                <img src="img/Home-Slider/131318301.jpg" alt="Marcos Estevam Duarte Climed">
                            
                        </li>
                    
            <li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">
                            
                                <img src="img/Home-Slider/131228201.jpg" alt="Dedetizadora Borges">
                            
                        </li><li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">
                            
                                <img src="img/Home-Slider/130978305.jpg" alt="Ambientos">
                            
                        </li><li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">
                            
                                <img src="img/Home-Slider/131890902.jpg" alt="Cito Laboratório de Citopatologia Ltda">
                            
                        </li><li width="300px" style="width: 100px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">
                            
                                <img src="img/Home-Slider/130978304.jpg" alt="Detalhe Decorações">
                            
                        </li></ul></div><div class="bx-controls bx-has-pager bx-has-controls-direction"><div class="bx-pager bx-default-pager"><div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link active">1</a></div><div class="bx-pager-item"><a href="" data-slide-index="1" class="bx-pager-link">2</a></div><div class="bx-pager-item"><a href="" data-slide-index="2" class="bx-pager-link">3</a></div><div class="bx-pager-item"><a href="" data-slide-index="3" class="bx-pager-link">4</a></div><div class="bx-pager-item"><a href="" data-slide-index="4" class="bx-pager-link">5</a></div><div class="bx-pager-item"><a href="" data-slide-index="5" class="bx-pager-link">6</a></div><div class="bx-pager-item"><a href="" data-slide-index="6" class="bx-pager-link">7</a></div><div class="bx-pager-item"><a href="" data-slide-index="7" class="bx-pager-link">8</a></div></div><div class="bx-controls-direction"><a class="bx-prev disabled" href="">Prev</a><a class="bx-next disabled" href="">Next</a></div></div></div>

html slide code ok:

<div class="bx-wrapper" style="max-width: 1500px;">
  <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 302px;">
    <ul class="bxslider" style="width: 1015%; position: relative; transition-duration: 1s; transform: translate3d(-3640px, 0px, 0px);">
      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">

        <img src="img/Home-Slider/130978001.jpg" alt="Gidesac Publicidade">

      </li>
      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">

        <img src="img/Home-Slider/1308962.jpg" alt="Anita Depiladora Eletrólise e Depilação">

      </li>
      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">

        <img src="img/Home-Slider/130593501.jpg" alt="Rede Sintonia">

      </li>
      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">

        <img src="img/Home-Slider/131318301.jpg" alt="Marcos Estevam Duarte Climed">

      </li>

      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;">

        <img src="img/Home-Slider/131228201.jpg" alt="Dedetizadora Borges">

      </li>

      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;">

        <img src="img/Home-Slider/130978305.jpg" alt="Ambientos">

      </li>

      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;">

        <img src="img/Home-Slider/131890902.jpg" alt="Cito Laboratório de Citopatologia Ltda">

      </li>

      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;">

        <img src="img/Home-Slider/130978304.jpg" alt="Detalhe Decorações">

      </li>

      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;">

        <img src="img/Home-Slider/130978001.jpg" alt="Gidesac Publicidade">

      </li>

      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;">

        <img src="img/Home-Slider/1308962.jpg" alt="Anita Depiladora Eletrólise e Depilação">

      </li>

      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;">

        <img src="img/Home-Slider/130593501.jpg" alt="Rede Sintonia">

      </li>

      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;">

        <img src="img/Home-Slider/131318301.jpg" alt="Marcos Estevam Duarte Climed">

      </li>

      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">

        <img src="img/Home-Slider/131228201.jpg" alt="Dedetizadora Borges">

      </li>
      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">

        <img src="img/Home-Slider/130978305.jpg" alt="Ambientos">

      </li>
      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">

        <img src="img/Home-Slider/131890902.jpg" alt="Cito Laboratório de Citopatologia Ltda">

      </li>
      <li width="300px" style="width: 300px; float: left; list-style: none; position: relative; margin-right: 100px;" class="bx-clone">

        <img src="img/Home-Slider/130978304.jpg" alt="Detalhe Decorações">

      </li>
    </ul>
  </div>
  <div class="bx-controls bx-has-pager bx-has-controls-direction">
    <div class="bx-pager bx-default-pager">
      <div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link">1</a></div>
      <div class="bx-pager-item"><a href="" data-slide-index="1" class="bx-pager-link active">2</a></div>
    </div>
    <div class="bx-controls-direction"><a class="bx-prev disabled" href="">Prev</a><a class="bx-next disabled" href="">Next</a></div>
  </div>
</div>