I've encountered an issue with my images within a jquery slider. While the slider itself is functioning properly, I am facing a couple of challenges. Initially, I aimed to make the images responsive, but upon removing the height property, the content below suddenly overlaps into the slider. Subsequently, when I tried adding a specific height value, the images ended up distorted whenever resizing the window. I'm seeking assistance in identifying where things might be going wrong.
HTML
<div id="indexSlider" class="indexImg">
<div><img class="indexImg" src="imgs//test/test1.jpg"></div>
<div><img class="indexImg" src="imgs/test/test2.jpg"></div>
<div><img class="indexImg" src="imgs//test/test3.jpg"></div>
</div>
CSS
.indexImg {
height: 45rem;
width: 100%;
}
#indexSlider div {
position:absolute;
z-index: 0;
}
#indexSlider div.previous {
z-index: 1;
}
#indexSlider div.current {
z-index: 2;
}
JQUERY
$(function() {
// create the image rotator
setInterval("rotateImages()", 2000);
});
function rotateImages() {
var oCurPhoto = $('#indexSlider div.current');
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.length == 0)
oNxtPhoto = $('#indexSlider div:first');
oCurPhoto.removeClass('current').addClass('previous');
oNxtPhoto.css({ opacity: 0.0 }).addClass('current')
.animate({ opacity: 1.0 }, 700,
function() {
oCurPhoto.removeClass('previous');
});
}