I studied some HTML and CSS, watched some lessons on YouTube and doing the lessons of Code Academy and now I'm creating my first website.
I want to add a slider of images, so I researched, the best option will be with jQuery itself, but this one I do not understand at all, so I tried to use some ready templates, What I liked the most was the bx slider , so I decided to use it.
I followed the instructions of the bx slider site and the slider appeared right on the site, but the "styles", the next and prev , the paging buttons and this do not appear as in bx slider examples, only text with no formatting appear.
Here is the HTML code (I hid the header because I think it does not influence the 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>
The bx slider FAQ indicates that this problem can happen because the images may not be in the same folder as the CSS file, but I checked and everything is fine.