I need simple static page with slideshow. I don't want to hardcode things, as I need this slide show to have arbitrary placement on page (left half of page for example), so, I guess, I need to use JavaScript. I don't want to use jQuery, because it's overkill for such simple project. Problem is - I'm not familiar with Web programming and JavaScript. Of course I would find out how to do it myself, but it would take time and I need to make it work as fast, as possible. May be you will help me?
I need something similar to this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Stream</title>
<style>
html {
overflow: hidden;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #000000;
}
.slideshow {
position: relative;
}
@keyframes fade {
0% {opacity: 0.5;}
0.83% {opacity: 1;}
32.5% {opacity: 1;}
34.16% {opacity: 0;}
99.17% {opacity: 0;}
100% {opacity: 0.5;}
}
.slideshow img {
position: absolute;
left: 0;
right: 0;
display: block;
margin: 0 auto;
opacity: 0;
animation-timing-function: linear;
animation-name: fade;
animation-duration: 30s;
animation-iteration-count: infinite;
}
.slideshow img:nth-child(1) {
animation-delay: 0s;
}
.slideshow img:nth-child(2) {
animation-delay: 10s;
}
.slideshow img:nth-child(3) {
animation-delay: 20s;
}
</style>
</head>
<body>
<div class="slideshow">
<img src="../../Images/Image1.png">
<img src="../../Images/Image2.png">
<img src="../../Images/Image3.png">
</div>
</body>
</html>
But with following requirements:
1) Images should fit into 100% height - not having their bottom cut, if their height is bigger, than 100%, as in my example.
2) Each should be shown for X seconds (10 second in my example), i.e. full cycle should take X * N seconds, where N is number of images
3) There should be cross-fade for Y seconds (0.5 seconds in my example) - i.e. Y/2 at the beginning and Y/2 at the end of animation - both should be included into X, not added to it.
4) If image width is smaller, than container width - it should be centered.
5) If image width is bigger, that container width - it should be repeated and scrolled for Z seconds (i.e. with speed Width/Z pixels per second), just like running line.