Scribd Logo
Upload

Welcome to Scribd!

  • 4 views

    Slide Ee

    Uploaded by

    ratsimbavahatriniaina

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Slide Ee

    Uploaded by

    ratsimbavahatriniaina
    4 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    4 views3 pages

    Slide Ee

    Uploaded by

    ratsimbavahatriniaina

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 3

    Ajouter une étiquette 21 mars 2024 à 14:28

    defilement
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width,
    initial-scale=1.0">
    <title>Automatic Background Slideshow</title>
    <style>
    body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    overflow: hidden;
    }

    .slides {
    display: flex;
    width: 100%;
    height: 100vh;
    transition: transform 0.8s ease-in-out;
    }
    .slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    }
    </style>
    </head>
    <body>
    <div class="slides">
    <div class="slide" style="background-image:
    url('image1.jpg');"></div>
    <div class="slide" style="background-image:
    url('image2.jpg');"></div>
    <div class="slide" style="background-image:
    url('image3.jpg');"></div>
    </div>

    <script>
    const slides =
    document.querySelectorAll('.slide');
    let currentSlide = 0;

    function nextSlide() {
    currentSlide = (currentSlide + 1) %
    slides.length;
    updateSlide();
    }

    function updateSlide() {
    const slideWidth = slides[0].clientWidth;

    document.querySelector('.slides').style.transfor
    m = `translateX(${-slideWidth * currentSlide}
    px)`;
    }

    setInterval(nextSlide, 5000); // Change slide


    every 5 seconds
    </script>
    </body>
    </html>

    You might also like