Code Snippet:
<div id="slideshow">
<img src="http://docode.com.ua/wp-content/uploads/pictures/pic-3.jpg"/>
<img src="http://docode.com.ua/wp-content/uploads/pictures/pic-2.jpg"/>
<img src="http://docode.com.ua/wp-content/uploads/pictures/pic-1.jpg"/>
</div>
CSS Styles:
#slideshow {
width:100%;
height:100%;
position:fixed;
}
#slideshow img {
width:100%;
height:100%;
display:block;
left:0;
top:0;
position:absolute;
opacity:0;
}
JQuery Script:
images = $('#slideshow img');
i = 0;
animateImage(i);
setInterval(function() {
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
animateImage(i);
}, 15000);
function animateImage(i) {
$(images).eq(i).fadeTo(100, 0.8);
$(images).eq(i).animate({
width: '150%',
height: '150%',
top: '-25%',
left: '-25%',
opacity: 1
}, 15000, "linear", function() {
$(this).fadeTo(1000, 0, function() {
$(this).css('width', '100%');
$(this).css('height', '100%');
$(this).css('top', '0');
$(this).css('left', '0');
});
});
}
Interactive Demo: Try out the demo here. Feel free to adjust the values, speed, and animations to customize the slideshow. It can be displayed in full screen or within a container on a webpage.