Scrolling slideshow

hi all basically i’v written some code
for a scrolling slideshow

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Link to your CSS file -->
    <link rel="stylesheet" href="C:\Users\User\Documents\GitHub\CoolvibesR\slides\styles.css">
    <!-- Your slideshow HTML content here -->
    <div class="slideshow">
    <div class="slide">
        <img src="C:\Users\User\Documents\GitHub\CoolvibesR\img\brandi.png" alt="Image 1">
    <div class="slide">
        <img src="C:\Users\User\Documents\GitHub\CoolvibesR\img\owners.png" alt="Image 2">
    <div class="slide">
        <img src="C:\Users\User\Documents\GitHub\CoolvibesR\img\kayley.png" alt="Image 3">



.slideshow {
    width: 300px; /* Adjust width as needed */
    height: 200px; /* Adjust height as needed */
    overflow: hidden;
    position: relative;

.slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: slideUp 10s infinite linear; /* Adjust animation duration as needed */

.slideshow img:nth-child(2) {
    animation-delay: 5s; /* Delay for the second image */

.slideshow img:nth-child(3) {
    animation-delay: 10s; /* Delay for the third image */

@keyframes slideUp {
    0% {
        transform: translateY(200px); /* Start from bottom */
    100% {
        transform: translateY(-600px); /* Move all the way to the top (three times the height of the container to accommodate for the number of images) */

but everytime i adjust the code my images are stacked ontop of one another?
when i want my images to scroll one after the other not ontop of each other!!!

how can i stop that

Hi @strawbs

Try changing the position property value to relative

Happy coding

thank you so much will try it

1 Like