0

Estou utilizando o plugin bxslide, no entando quando eu carrego a página ele funciona normalmente, mas quando dou refresh, ele buga as imagens aparecendo todos os slides, não da erro de JS, mas quando eu altero o tamanho da página mesmo com ele bugado ele volta a funcionar normalmente.

Carrego antes de fechar o body

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

depois do script acima vem a chamada:

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

resultado bugado depois que redimensiono manualmente a janela do browser ele volta ao normal

inserir a descrição da imagem aqui

codigo html slide bugado:

<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>

codigo html slide 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>

3
  • Poste a parte relevante do seu código aqui.
    – OnoSendai
    24/04/2017 às 13:41
  • postado @OnoSendai 24/04/2017 às 14:31
  • Seu código esta todo separado tenta juntar a parte relevante 25/04/2017 às 16:49

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .