When using bxslider, there is no arrow in images
I just learned about bxslider and made my first slideshow by reading the docs. But I can't see the right and left arrows in the images so that the next image is clicked 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 these "two arrows" that when clicked give the next or previous slide? I couldn't really find out anything "different" that I may have written, or something that I may have forgotten. Thank.
source to share
Although you provided your code, it is not easy to guess why the arrows are not showing. One simple reason might be that the image for the arrows is missing / misplaced, so just check if the image is controls.png
in the correct place. bxslider uses this image to display 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 customize the CSS, you can add a directory images
to the folder where your bxslider.css is located and copy that image to that folder.
To check if the controls are already on the slider and only the image is missing, you can check it with web developer tools if the next div is inside <div class="slider">
<div class="bx-controls-direction">
<a href="" class="bx-prev">Prev</a>
<a href="" class="bx-next">Next</a>
</div>
source to share