Slideshow fullwidth
HTML
<div class="fadein">
<img src="http://i.imgur.com/FGLGf6M.png" align="middle">
<img src="http://i.imgur.com/WPo9fHR.jpg" align="middle">
<img src="http://i.imgur.com/IHIUS1K.png" align="middle">
</div>I'm a text
CSS
.fadein {
padding:0px;
margin:0px;
position:relative;
padding:0;
}
.fadein img {
position:absolute;
left:0;
top:0;
width:100%;
}
JavaScript
$(function () {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}, 3000);
});
function changeHeight() {
var biggestHeight = "0";
// Loop through elements children to find & set the biggest height
$(".fadein *").each(function () {
// If this elements height is bigger than the biggestHeight
if ($(this).height() > biggestHeight) {
// Set the biggestHeight to this Height
biggestHeight = $(this).height();
}
});
// Set the container height
$(".fadein").height(biggestHeight);
}
changeHeight();
$(window).resize(changeHeight);