Scribd Logo
Upload

Welcome to Scribd!

  • 6 views

    Slide Show

    Uploaded by

    tettst6

    Copyright:

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

    You might also like

    Slide Show

    Uploaded by

    tettst6
    6 views2 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
    6 views2 pages

    Slide Show

    Uploaded by

    tettst6

    Copyright:

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

    Slide Show

    As we know a web slider/slideshow is a flow of images or text that consists of displaying one
    element of the flow in a certain time interval. In real-time conditions, there may be a need
    to put an image slideshow on web applications, web pages, or anywhere else.

    Example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    /* Style for the slideshow container and slides */
    .slideshow-container {
    max-width: 600px;
    position: relative;
    margin: auto;
    }

    .mySlides {
    display: none;
    }

    /* Style for navigation dots */


    .dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    }

    .active {
    background-color: #717171;
    }
    </style>
    </head>
    <body>

    <div class="slideshow-container">
    <!-- Slides -->
    <div class="mySlides">
    <img src="slide1.jpg" style="width:100%">
    </div>

    <div class="mySlides">
    <img src="slide2.jpg" style="width:100%">
    </div>
    <div class="mySlides">
    <img src="slide3.jpg" style="width:100%">
    </div>

    <!-- Navigation dots -->


    <div style="text-align:center">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    </div>
    </div>

    <script>
    // JavaScript for the slideshow functionality
    let slideIndex = 0;
    showSlides();

    function showSlides() {
    let i;
    const slides = document.getElementsByClassName("mySlides");
    const dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
    slideIndex = 1;
    }
    for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
    setTimeout(showSlides, 2000); // Change slide every 2 seconds
    }
    </script>

    </body>
    </html>

    You might also like