I just learnt about bxslider and made my first slideshow by reading the docs. But I cant see the right and left arrows on the images so that the next image can be shown by a click as shown in this example at: This Link
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>New seven Wonders of the world</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<ul class="bxslider">
<li><img src="pic2.jpg" title="Great Wall of China, China"/></li>
<li><img src="pic3.jpg" title="Petra, Jordan" /></li>
<li><img src="pic4.jpg" title="Colosseum, Rome, Italy" /></li>
<li><img src="pic5.jpg" title="Chichen Itza, Mexico" /></li>
<li><img src="pic6.jpg" title="Machu Pichu, Peru" /></li>
<li><img src="pic7.jpg" title="Taj Mahal, India" /></li>
<li><img src="pic8.jpg" title="Christ the redeemer, Brazil" /></li>
<li><img src="pic1.jpg" title="Giza Necropolis, Egypt (Honorary title only)" /></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({slideWidth: 700,auto: true,
mode: 'fade', captions: true, speed: 700});
});
</script>
</body>
</html>
Any reason why I can't see those 2 arrows which, when clicked, give the next or previous slide? I couldn't really find out anything different that I may have written or anything that I may have forgot.
Though you provided your code, it's not easy to guess why the arrows aren't displayed. One simple reason could just be that the image for the arrows is missing / misplaced, so just check if the image controls.png is at the correct location. bxslider uses this image to display the arrows - http://bxslider.com/lib/jquery.bxslider.css line 106:
.bx-wrapper .bx-prev {
background: url("images/controls.png") no-repeat scroll 0 -32px rgba(0, 0, 0, 0);
}
If you don't want to adjust the CSS, you can add a directory images in the folder where your bxslider.css is located and copy this image to this folder.
To check if the controls are already at the slider and only the image is missing, you can check with web dev tools if following div is inside the <div class="slider">
<div class="bx-controls-direction">
<a href="" class="bx-prev">Prev</a>
<a href="" class="bx-next">Next</a>
</div>