I am looking to design a CSS3 slideshow similar to the one demonstrated in this example:
Pure CSS Slideshow
Currently, my HTML code utilizes the <picture> tag to display specific images based on the orientation of the display-port, whether portrait or landscape.
The tutorial for the slideshow involves using an <ul> with multiple <li> elements to define the pictures in the slideshow.
However, when I attempt to include these <ul> and <li> elements within my <picture> element, the browser is unable to locate the image(s).
Here is a snippet of my code:
HTML:
<div id="image">
<picture>
<source media="all and (orientation: portrait)" srcset="images/faust_portrait.jpg">
<source media="all and (orientation: landscape)" srcset="images/faust_landscape.jpg">
<img src="images/faust_1024.jpg" alt="faust">
</picture>
</div>
CSS:
#image {
width: 100%;
height: auto;
line-height: 0;
animation-name: move;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
#image img {
width: 100%;
}
Currently, the image assigned is sliding out and back into the screen once. My goal is to have around 5 pictures, each available in two versions depending on the viewport's orientation, sliding continuously. This would serve as a header for the webpage. Any advice on how I can achieve this?