Scribd Logo
Upload

Welcome to Scribd!

  • TR

    Uploaded by

    narim
    7 views1 page
    This document describes an image slider that automatically cycles through a series of images every 2 seconds. It uses CSS to style the slider and images, and JavaScript to select the images, track the current slide, and change the "active" class to transition between slides on a timer.

    Original Description:

    Original Title

    tr

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document describes an image slider that automatically cycles through a series of images every 2 seconds. It uses CSS to style the slider and images, and JavaScript to select the images, track the current slide, and change the "active" class to transition between slides on a timer.

    Copyright:

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

    TR

    Uploaded by

    narim
    This document describes an image slider that automatically cycles through a series of images every 2 seconds. It uses CSS to style the slider and images, and JavaScript to select the images, track the current slide, and change the "active" class to transition between slides on a timer.

    Copyright:

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

    <html><html>

    <head>
    <style>
    .slider {
    width: 500px;
    height: 300px;
    margin: 50px auto;
    position: relative;
    }
    .slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s;
    }
    .slide.active {
    opacity: 1;
    }
    </style>
    </head>
    <body onload="startSlider()">
    <h1>Random Image Slider</h1>
    <div class="slider">
    <img src="image1.jpg" alt="Image 1" class="slide active">
    <img src="image2.jpg" alt="Image 2" class="slide">
    <img src="image3.jpg" alt="Image 3" class="slide">
    <img src="image4.jpg" alt="Image 4" class="slide">
    <img src="image5.jpg" alt="Image 5" class="slide">
    </div>
    <script>
    let slides = document.querySelectorAll(".slide");
    let currentSlide = 0;
    let slideInterval = setInterval(nextSlide, 2000);

    function startSlider() {
    slides[currentSlide].classList.add("active");
    }

    function nextSlide() {
    slides[currentSlide].classList.remove("active");
    currentSlide = (currentSlide + 1) % slides.length;
    slides[currentSlide].classList.add("active");
    }
    </script>
    </body>
    </html>

    You might also like