-1

Estudei um pouco de HTML e CSS, vendo algumas aulas no YouTube e fazendo as lições do Code Academy e agora estou criando meu primeiro site.

Quero adicionar um slider de imagens, pelo que pesquisei, a melhor opção será com jQuery mesmo, mas deste eu não entendo absolutamente nada, então tentei utilizar alguns modelos prontos, seguindo a documentação desses, e o que gostei mais foi o bx slider, então decidi usá-lo.

Segui as instruções do próprio site do bx slider e o slider apareceu certinho no site, mas os "estilos", os botões de next e prev, os botões de paginação e tal não aparecem como nos exemplos do bx slider, aparecem apenas textos sem nenhuma formatação.

Aqui o código HTML (ocultei o header pois acho que não influência no slider):

<!DOCTYPE html5>
<html>
<head>
    <html lang="pt-br" />
        <meta charset="utf-8" />
    <title></title>    
    <link href="css/styles.css" rel="stylesheet" type="text/css">
        <link href="/lib/jquery.bxslider.css" rel="stylesheet" />
        <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/jquery.bxslider.min.js"></script>
</head>
<body>
    <header>
        ...
    </header>
    <div id="indexbanner">
        <ul class="bxslider">
          <li><img src="imgsprodutos/img (41).jpg" /></li>
          <li><img src="imgsprodutos/img (42).jpg" /></li>
          <li><img src="imgsprodutos/img (43).jpg" /></li>
        </ul>
        <script type="text/javascript">
            $(document).ready(function(){
                $('.bxslider').bxSlider({
                    auto: true,
                    autocontrols: true,
                    responsive: false,
                    touchenabled: true
                });
            });
        </script>
    </div>
</body>
</html>

O FAQ do bx slider indica que esse problema pode acontecer pois as imagens talvez não estejam na mesma pasta do arquivo CSS, mas já conferi e está tudo certinho.

8
  • 1
    esse doctype está incorreto. <!DOCTYPE html5> creio que você "quis dizer" <!DOCTYPE html>
    – Largato
    Commented 14/05/2014 às 1:40
  • Ahh, obrigado por avisar, não sei de onde tirei esse doctype! haha Mas não resolveu o problema... :(
    – pitalig
    Commented 14/05/2014 às 1:45
  • Acho uma boa verificar se os arquivos .css e .js estejam nos caminhos indicados. Em seguida, testar se $().bxSlider retorna vazio ou existe (é a função chamada para inicializar o slider). Se ainda assim não funcionar, acho que só olhando/depurando o código do bxslider para saber ao certo.
    – dang
    Commented 14/05/2014 às 1:49
  • Muuuuuuito obrigado! O href do jquery.bxslider.css estava errado! Nossa, tinha conferido isso algumas vezes já e não tinha percebido! Obrigado Dang!
    – pitalig
    Commented 14/05/2014 às 1:54
  • 5
    Esta pergunta parece ser descontextualizada porque é demasiado pontual e o problema não é possível de reproduzir.
    – Sergio
    Commented 14/05/2014 às 3:12

1 Resposta 1

1

Pode começar verificando se os arquivos .css e .js estão nos caminhos indicados.

Em seguida, testar se $().bxSlider retorna vazio ou existe (é a função chamada para inicializar o slider).

Se ainda assim não funcionar, acho que só olhando/depurando o código do bxslider para saber ao certo.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .