Scrolling slideshow

HTML-CSS
1

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

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coolvibez-Reloaded</title>
    <!-- Link to your CSS file -->
    <link rel="stylesheet" href="C:\Users\User\Documents\GitHub\CoolvibesR\slides\styles.css">
</head>
<body>
    <!-- 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>
    <div class="slide">
        <img src="C:\Users\User\Documents\GitHub\CoolvibesR\img\owners.png" alt="Image 2">
    </div>
    <div class="slide">
        <img src="C:\Users\User\Documents\GitHub\CoolvibesR\img\kayley.png" alt="Image 3">
    </div>
</div>


</body>
</html>



css

.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

2

Hi @strawbs

Try changing the position property value to relative

Happy coding

3

thank you so much will try it

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.