I have created the following code as animation. However, I want it as image carousel, so that after Image 1 leaves the screen then it comes after image 3.
At the moment the animation just starts again.
Any suggestions how to get the carousel effect?
I appreciate your replies!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Image Generator</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" rel="stylesheet">
<style>
.scrolling-images-wrapper {
overflow: hidden;
position: relative;
width: 100%;
height: 220px;
}
.scrolling-images {
display: flex;
animation: scroll 20s linear infinite;
}
.scrolling-images img {
width: 200px;
height: 200px;
margin-right: 16px;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100px * 5)); /* Number of images to show in one loop * image width */
}
}
</style>
<style>
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes progress {
0% { width: 0; }
100% { width: 100%; }
}
@keyframes robot {
0% { left: 0; }
100% { left: calc(100% - 30px); }
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<section class="scrolling-images-wrapper">
<div class="scrolling-images">
<img src="https://via.placeholder.com/200x200?text=Image1" alt="Image1">
<img src="https://via.placeholder.com/200x200?text=Image2" alt="Image2">
<img src="https://via.placeholder.com/200x200?text=Image3" alt="Image3">
</div>
</section>
</body>
</html>