Question

I would like to make a Jquery slider, with the previous and next button in the image. I currently have the following code, which shows the previous and next button below the image. The slider is working now as it’s supposed to, but the buttons are below the image instead of in the image. How could I change this to have the previous and next button in the image?

HTML code:

<div id="slider">
       <ul>
         <li id="slide1"></li>
         <li id="slide2"></li>
         <li id="slide3"></li>
       </ul>
       <a href="#" id="slider_prev"></a>
       <a href="#" id="slider_next"></a>
</div>

CSS code:

#slider {
width:1148px;
    overflow: hidden;
}
#slider ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 position: relative;
 z-index: 1;
}
#slider ul li {
 float: left;
 width: 1148px;
 height: 195px;
}
#slider_prev, #slider_next {
width:53px;
height:52px;
display:block;
margin-top:69px;
}
#slider_prev {
float:left;
margin-left:42px;
margin-right:92px;
background: url("../images/prev.png") no-repeat 0 0 transparent;
}
#slider_next {
float:right;
margin-right:42px;
margin-left:92px;
background: url("../images/next.png") no-repeat 0 0 transparent;
}
#slide1 {
 background-image: url("../images/slider_1.png");
}
#slide2 {
 background-image: url("../images/slider_2.png");
}
#slide3 {
 background-image: url("../images/slider_3.png");
}

Answer 1

What you are wanting to do is place one element over the other. You need to set position to absolute for the 2 anchor tags. And then set the z-index for those elements. z-index determines which element is above other. A relatively lower z-index will move element beneath the others and vice-versa. But the absolute position needs to be relative to some parent element. As you are positioning element relative to slider then the element with id= slider should be set to relative. And lastly set the position for the buttons using the “top” “bottom” “left” “right” variables.

#slider {
    width:1148px;
    overflow: hidden;
    position: relative; //Set parent element to relative
}
#slider_prev, #slider_next {
    width:53px;
    height:52px;
    display:block;
    position: absolute;    // Set the buttons to position absolute
    z-index: 100;  //Set a value for z-index
    top: px;  //Set the amount of pixels from top of "slider" div
}
#slider_prev {
    left: px;  //Set the amount of pixels from left of "slider" div
    background: url("../images/prev.png") no-repeat 0 0 transparent;
}
#slider_next {
    right: px;  //Set the amount of pixels from right of "slider" div
    background: url("../images/next.png") no-repeat 0 0 transparent;
}

Hope that helps.