I have created a simple slideshow image div. I want to adjust it to show the bottom of the image instead of the top.
Here is the HTML Code:
<div class="slideshow">
<div>
<img src="image1.jpg" />
</div>
<div>
<img src="image2.jpg" />
</div>
<div>
<img src="image3.jpg" />
</div>
</div>
And here is the JQuery Code:
$(function(){
$(".slideshow > div:gt(0)").hide();
setInterval(function(){
$('.slideshow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('.slideshow');
}, 8000);
});
Lastly, the CSS Code:
.slideshow {
position: relative;
width: 100%;
max-height: 500px;
}
.slideshow > div {
position: absolute;
width: 100%;
max-height: 500px;
overflow: hidden;
}
.slideshow > div > img {
width: 100%;
}
The code works well, but currently only shows the top part of images that are 500px in height. How can we adjust this for images with varying heights?