SmtC: Show me the Code!

< Atividades 3 | Carousel | Classe >

Slide Shows com Carousel

HTML5
https://www.w3schools.com/w3css/w3css_slideshow.asp

Header & Tailer:

HTML Listing: ../Code/Header.html.

<!DOCTYPE html>
<HTML>
  <HEAD>
    <TITLE>Poopys</TITLE>
    <META content="text/html; charset=utf-8" http-equiv="Content-type">
    <META content="Prof. Dr. Ole Peter Smith, IME/UFG" name="Autor">
    <LINK href="W3.css" rel="stylesheet">
  </HEAD>
  <BODY>

HTML Listing: ../Code/Tail.html.

    <SCRIPT>
        var slideIndex = 0;
        carousel();
        
        function carousel() {
            var i;
            var x = document.getElementsByClassName("mySlides");
            for (i = 0; i < x.length; i++) {
              x[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > x.length) {slideIndex = 1}
            x[slideIndex-1].style.display = "block";
            setTimeout(carousel,200); // Change image every 100 ms
        }
    </SCRIPT>
  </BODY>
</HTML>

Body: Lista de IMG tags, do CLASS mySlides:

HTML Listing: Carousel.html.

<H1>Epitrochoid Animation</H1>

<DIV class="w3-content w3-section">
....
<IMG class="mySlides" height="800" src="Epitrochoid/013.svg" width="800">
<IMG class="mySlides" height="800" src="Epitrochoid/014.svg" width="800">
<IMG class="mySlides" height="800" src="Epitrochoid/015.svg" width="800">
<IMG class="mySlides" height="800" src="Epitrochoid/016.svg" width="800">
<IMG class="mySlides" height="800" src="Epitrochoid/017.svg" width="800">
<IMG class="mySlides" height="800" src="Epitrochoid/018.svg" width="800">
....
</DIV>

< Atividades 3 | Carousel | Classe >