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.
<!DOCTYPE html5>
creio que você "quis dizer"<!DOCTYPE html>
.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.