|
|
(47 intermediate revisions by one other user not shown) |
Line 1: |
Line 1: |
| {{Queens Canada/Header}} | | {{Queens Canada/Header}} |
| {{Queens Canada/Navbar}} | | {{Queens Canada/Navbar}} |
− |
| |
| <html> | | <html> |
− | <title>W3.CSS</title> | + | <head> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | | <meta name="viewport" content="width=device-width, initial-scale=1"> |
− | <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> | + | <style> |
| + | body { |
| + | background-color: white; |
| + | margin-top: 50px; |
| + | max-width: 1200px; |
| + | position: relative; |
| + | margin-left: auto; |
| + | margin-right: auto; |
| + | } |
| + | </style> |
| + | </head> |
| + | |
| <body> | | <body> |
| | | |
− | <h2 class="w3-center">Manual Slideshow</h2> | + | <h1> Integrated Human Practices</h1> |
| | | |
− | <div class="w3-content w3-display-container"> | + | <p>Text</p> |
− | <img class="mySlides" src="img_snowtops.jpg" style="width:100%">
| + | |
− | <img class="mySlides" src="img_lights.jpg" style="width:100%">
| + | |
− | <img class="mySlides" src="img_mountains.jpg" style="width:100%">
| + | |
− | <img class="mySlides" src="img_forest.jpg" style="width:100%">
| + | |
| | | |
− | <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
| + | <br> |
− | <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
| + | <h2>123</h2> |
− | </div> | + | |
| | | |
− | <script> | + | <br> |
− | var slideIndex = 1;
| + | <h2>456</h2> |
− | showDivs(slideIndex);
| + | <br> |
| | | |
− | function plusDivs(n) {
| + | </body> |
− | showDivs(slideIndex += n);
| + | |
− | }
| + | |
| | | |
− | function showDivs(n) {
| |
− | var i;
| |
− | var x = document.getElementsByClassName("mySlides");
| |
− | if (n > x.length) {slideIndex = 1}
| |
− | if (n < 1) {slideIndex = x.length}
| |
− | for (i = 0; i < x.length; i++) {
| |
− | x[i].style.display = "none";
| |
− | }
| |
− | x[slideIndex-1].style.display = "block";
| |
− | }
| |
− | </script>
| |
− |
| |
− | </body>
| |
| </html> | | </html> |