Currently I am a student studying the fundamentals of HTML and CSS. My latest project involved creating a website showcasing my work from digital arts class, complete with a simple CSS slideshow. The original intention was to have each image displayed on its own slide that would automatically cycle through. However, after resizing the images to fit when maximizing the tab, they ended up all bunched together on a single slide. Here is an example of the HTML code used:
@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
#slider {
overflow: hidden;
}
#slider figure img {
width: 20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slider infinite;
}
img {
display: block;
max-width: 5%;
width: auto;
height: auto;
}<div id="slider">
<figure>
<img src="riley%20clipping%20mask%20again.jpg" style="width:10%;">
<img src="pouya%20t%20shirt%20design.jpg" style="width:10%;">
<img src="Bob%20ross%20is%20our%20lord%20-riley.jpg" style="width:10%;">
<img src="Pos%20and%20neg%20riley.jpg" style="width:10%;">
<img src="ben%20is%20trippy.jpg" style="width:10%;">
</figure>
</div>