|
|
| வரிசை 1: |
வரிசை 1: |
| − | <html>
| + | {{:SlidePageAds}} |
| − | <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;" |
