CODEWITHSUNDEEP
javascripthtmlcss
Jeff Meigs
Jeff Meigs

Reputation: 305

I made a Javascript slider and i'm having some serious trouble with the CSS.

So I made a Javascript Slider. The problem is that the Image is like pushing down my next/prev divs when the image loads and its not sitting in the container I have for the slider right either. I'm not sure whats going on Here is my code: I can post a link to my site if you need to see it. HTML

<div id="sliderFrame">
  <img src="img/CS-GO-Test.jpg" name="slider"  alt="" />
  <div id="prev" onClick="swapImage(-1)"></div>
  <div id="next" onClick="swapImage(+1)"></div>
</div>

CSS

#sliderFrame{
margin-top: 10px;
width:100%;
height:350px;
border: 2px solid #003E66;
background:#CAE9FF;

}
#prev{
z-index:99;
display:block;
float:left;
height:100%;
width:5px;
background-color:#8F8F8F;
opacity: 0.2;
width:10%;
position:relative;
}
#prev:hover{
opacity: 0.4;
}
#next{
z-index:99;
display:block;
float:right;
height:100%;
width:10px;
background-color:#8F8F8F;
opacity: 0.2;
width:10%;
position:relative;
}
#next:hover{
opacity: 0.4;
}

JavaScript

var Image = new Array("img/CS-GO-Test.jpg", "img/CS-GO-Test2.jpg", "img/test.jpg");
var ImageNum = 0;
var ImageLength = Image.length -1;

function swapImage(num){
  ImageNum = ImageNum + num;

  if(ImageNum > ImageLength){
    ImageNum = 0;   
  }

  if(ImageNum < 0){
    ImageNum = ImageLength; 
  }

 document.slider.src = Image[ImageNum];
}

Upvotes: 0

Views: 86

Answers (1)

William Fuh
William Fuh

Reputation: 71

To place the next and prev divs above sliderFrame use absolute positioning instead of relative positioning for the #prev and #next elements.

Here is how I would do it:

#sliderFrame {
margin-top: 10px;
width: 100%;
height: 350px;
border: 2px solid #003E66;
background: #CAE9FF;
position:relative; /*add this so that divs inside can be placed relative to THIS div*/
}
#prev {
z-index: 99;
display: block;
height: 100%;
width: 10px;
background-color: #8F8F8F;
opacity: 0.2;
width: 10%;
position: absolute; /*needed for placement relative to the parent element (sliderFrame) and for overlapping elements*/
top: 0; /*place on top*/
}
#next {
z-index: 99;
display: block;
height: 100%;
width: 10px;
background-color: #8F8F8F;
opacity: 0.2;
width: 10%;
position: absolute; /*absolute positioning to place relative to parent element (sliderFrame) */
right: 0; /*instead of floats use right for positioning*/
top: 0; /*place on top*/
}

To sum it up, make sure that the parent container (sliderFrame) is set the position to relative and use absolute positioning for the inside elements that need to be positioned over the parent element.

Check out this link to learn more about absolute and relative positioning: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Upvotes: 3

Related Questions