No Arrow On Images When Using Bxslider

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

Solution 1:

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> 

Solution 2:

I have same problem with you, fixed by put the controls.png inside the lib folder which is stick together with jquery.bxslider.css.