"முதற் பக்கம்" பக்கத்தின் திருத்தங்களுக்கிடையேயான வேறுபாடு
நூலகம் இல் இருந்து
| வரிசை 1: | வரிசை 1: | ||
| + | <html> | ||
| + | <head> | ||
| + | <title>W3.CSS</title> | ||
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| + | <meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type"> | ||
| + | <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> | ||
| + | <style> | ||
| + | .mySlides {display: none;} | ||
| + | .slideshow-arrow { | ||
| + | position: absolute; | ||
| + | top: 50%; | ||
| + | font-size: 30px; | ||
| + | cursor: pointer; | ||
| + | z-index: 1; | ||
| + | padding: 10px; | ||
| + | } | ||
| + | .slideshow-arrow.left { left: 10px; } | ||
| + | .slideshow-arrow.right { right: 10px; } | ||
| + | </style> | ||
| + | </head> | ||
| + | <body> | ||
| + | |||
| + | <div class="w3-content w3-section" style="max-width:1200px; position: relative;" onclick="pauseResumeCarousel()"> | ||
| + | <img class="mySlides" src="https://noolaham.org/wiki/images/a/a7/First.jpeg" style="width:100%"> | ||
| + | <img class="mySlides" src="https://noolaham.org/wiki/images/a/a0/Second.jpeg" style="width:100%"> | ||
| + | <img class="mySlides" src="https://noolaham.org/wiki/images/f/ff/Slide3.jpeg" style="width:100%"> | ||
| + | <img class="mySlides" src="https://noolaham.org/wiki/images/4/48/Forth.jpeg" style="width:100%"> | ||
| + | |||
| + | <span class="slideshow-arrow left" onclick="changeSlide(-1)">❮</span> | ||
| + | <span class="slideshow-arrow right" onclick="changeSlide(1)">❯</span> | ||
| + | </div> | ||
| + | |||
| + | <script> | ||
| + | var myIndex = 0; | ||
| + | var pauseTimer; | ||
| + | |||
| + | carousel(); | ||
| + | |||
| + | function carousel() { | ||
| + | var i; | ||
| + | var x = document.getElementsByClassName("mySlides"); | ||
| + | for (i = 0; i < x.length; i++) { | ||
| + | x[i].style.display = "none"; | ||
| + | } | ||
| + | myIndex++; | ||
| + | if (myIndex > x.length) {myIndex = 1} | ||
| + | x[myIndex-1].style.display = "block"; | ||
| + | pauseTimer = setTimeout(carousel, 3000); // Change image every 3 seconds | ||
| + | } | ||
| + | |||
| + | function changeSlide(offset) { | ||
| + | var x = document.getElementsByClassName("mySlides"); | ||
| + | myIndex += offset; | ||
| + | if (myIndex > x.length) { myIndex = 1; } | ||
| + | if (myIndex < 1) { myIndex = x.length; } | ||
| + | for (var i = 0; i < x.length; i++) { | ||
| + | x[i].style.display = "none"; | ||
| + | } | ||
| + | x[myIndex-1].style.display = "block"; | ||
| + | } | ||
| + | |||
| + | function pauseResumeCarousel() { | ||
| + | clearTimeout(pauseTimer); // Stop the automatic carousel timer | ||
| + | pauseTimer = setTimeout(carousel, 8000); // Restart the automatic carousel after 8 seconds | ||
| + | } | ||
| + | </script> | ||
| + | |||
| + | </body> | ||
| + | </html> | ||
| + | |||
{| id="mp-upper" style="margin:0 0 0 0; background:none;" | {| id="mp-upper" style="margin:0 0 0 0; background:none;" | ||
|width="50%" class="MainPageBG" style="border: 1px solid #c6c9ff; color: #000; background-color: #f5faff"| | |width="50%" class="MainPageBG" style="border: 1px solid #c6c9ff; color: #000; background-color: #f5faff"| | ||
06:11, 28 சூலை 2023 இல் நிலவும் திருத்தம்
இது ஒரு நூலக நிறுவனச் செயற்றிட்டம். This is a Noolaham Foundation project.