I did that for the bullets. However they still are not in view. When I roll over them with my mouse they work - I just cannot see them.
Any thoughts on the arrow navigation?
I really appreciate your help!
CSS
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:459px; left:280px; /* Its position is relative to the #slider. Don't set #slider "overflow:hidden;" if bullets are to be positioned outside of the #slider. */
width:150px;
background:none;
position:relative;
z-index:5;
cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent url(images/bullet.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:20px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
/*----------- navigation buttons on both sides of the slider -----------*/
.group1-Wrapper
{
position:absolute;
z-index:20;
top:120px;
margin-left:50%;/* position it in the middle of #sliderFrame */
width:1px;
}
a.group1-Prev, a.group1-Next
{
width:50px;height:150px;
background:transparent url(navButtons2.gif);
display:block;
cursor:pointer;
position:absolute;
top:0;
user-select: none;
}
a.group1-Prev{background-position:0 0; left: -510px;}
a.group1-Next {background-position:0 -150px;left:460px;}
a.group1-Prev:hover{background-position:50px 0;}
a.group1-Next:hover {background-position:50px -150px;}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Demo 1 - Menucool Image Slider</title>
<link href="css/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="scripts/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="sliderFrame">
<div id="slider">
<a href="" target="_blank"><img src="images/Office_Solution_1_A.jpg" alt="Sweet Desk!" /></a>
<img src="images/Office_Solution_2_B.jpg" alt="WOW!" />
<img src="images/Office_Solution_3.jpg" alt="Black Anodized Profiles!" />
<img src="images/Office_Solution_4.jpg" alt="#htmlcaption" />
<img src="images/Office_Solution_5_A.jpg" alt="WOW!" />
</div>
<div class="group1-Wrapper">
<a onclick="imageSlider.previous()" class="group1-Prev"></a>
<a onclick="imageSlider.next()" class="group1-Next"></a> </div>
<div id="htmlcaption" style="display: none;"><em>AmazingSolution!</em> <a href=""></a>
</div>
</div>
</body>
</html>