Customized navigation arrows not displaying in cycle 2

Customized navigation arrows not displaying in cycle 2

Hey guys i am using cycle 2 for a project of mine and basically all i wanted to do was add a custom arrow for the left and right navigation. I saw this example in the documentation  HERE (see the first example).

Now i tried it by myself , i have the following HTML:

  1. <div class="cycle-slideshow"
  2.     data-cycle-fx="scrollHorz"
  3.     data-cycle-timeout="0"
  4.     data-cycle-prev="#prev"
  5.     data-cycle-next="#next"
  6.     >
  7.     <img src="http://malsup.github.io/images/p1.jpg">
  8.     <img src="http://malsup.github.io/images/p2.jpg">
  9.     <img src="http://malsup.github.io/images/p3.jpg">
  10.     <img src="http://malsup.github.io/images/p4.jpg">
  11.     <div href=# id="prev" class="cycle-prev"></div> 
  12.     <div href=# id="next" class="cycle-next"></div>
  13. </div>
and the following CSS:

  1. .cycle-prev, .cycle-next {
  2.     position: absolute;
  3.     top: 0;
  4.     width: 30%;
  5.     opacity: 0;
  6.     filter: alpha(opacity=0);
  7.     z-index: 800;
  8.     height: 100%;
  9.     cursor: pointer;
  10. }

  12. .cycle-next {
  13.     right: 0;
  14.     background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;
  15. }

  17. .cycle-prev {
  18.     left: 0;
  19.     background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;
  20. }
But somehow the arrows just won't show up, the area around the slider is clickable and you can navigate left and right that the only problem i have is that. My simple Demo can be see  HERE . Now my question is why are my arrows not showing ? why are the arrows not displaying at all ?