Changes for page Presentation Test Page
Last modified by Erik Bakker on 2024/07/30 14:39
From version 34.1
edited by Erik Bakker
on 2024/07/30 14:21
on 2024/07/30 14:21
Change comment:
There is no comment for this version
To version 53.1
edited by Erik Bakker
on 2024/07/30 14:39
on 2024/07/30 14:39
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (0 modified, 1 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -42,40 +42,41 @@ 42 42 43 43 == Current slide == 44 44 45 +{{html}} 46 +<!-- Slideshow container --> 47 +<div class="slideshow-container"> 45 45 46 - 47 -{{html}}<html> 48 -<body> 49 - 50 - <!-- Define the slideshow container --> 51 - <div id="slideshow"> 52 - <div class="slide-wrapper"> 53 - 54 - <!-- Define each of the slides 55 - and write the content --> 56 - 57 - <div class="slide"> 58 - <h1 class="slide-number"> 59 - GeeksforGeeks 60 - </h1> 61 - </div> 62 - <div class="slide"> 63 - <h1 class="slide-number"> 64 - A computer science portal 65 - </h1> 66 - </div> 67 - <div class="slide"> 68 - <h1 class="slide-number"> 69 - This is an example of 70 - </h1> 71 - </div> 72 - <div class="slide"> 73 - <h1 class="slide-number"> 74 - Slideshow with HTML and CSS only 75 - </h1> 76 - </div> 77 - </div> 78 - </div> 79 -</body> 80 - 81 -</html>{{/html}} 49 + <!-- Full-width images with number and caption text --> 50 + <div class="mySlides fade"> 51 + <div class="numbertext">1 / 3</div> 52 + <img src="/bin/download/Main/Images/General/WebHome/main-background-slide-emagiz.png" style="width:100%"> 53 + <div class="text">Caption Text</div> 54 + </div> 55 + 56 + <div class="mySlides fade"> 57 + <div class="numbertext">2 / 3</div> 58 + <img src="/bin/download/Main/Images/General/WebHome/Logo_Vogelbekdier.png" style="width:100%"> 59 + <div class="text">Caption Two</div> 60 + </div> 61 + 62 + <div class="mySlides fade"> 63 + <div class="numbertext">3 / 3</div> 64 + <img src="/bin/download/Main/Images/General/WebHome/statuspage.png" style="width:100%"> 65 + <div class="text">Caption Three</div> 66 + </div> 67 + 68 + <!-- Next and previous buttons --> 69 + <a class="prev" onclick="plusSlides(-1)">❮</a> 70 + <a class="next" onclick="plusSlides(1)">❯</a> 71 +</div> 72 +<br> 73 + 74 +<!-- The dots/circles --> 75 +<div style="text-align:center"> 76 + <span class="dot" onclick="currentSlide(1)"></span> 77 + <span class="dot" onclick="currentSlide(2)"></span> 78 + <span class="dot" onclick="currentSlide(3)"></span> 79 +</div> 80 + 81 +{{/html}} 82 +
- XWiki.JavaScriptExtension[0]
-
- Caching policy
-
... ... @@ -1,0 +1,1 @@ 1 +long - Code
-
... ... @@ -1,0 +1,28 @@ 1 +let slideIndex = 1; 2 +showSlides(slideIndex); 3 + 4 +// Next/previous controls 5 +function plusSlides(n) { 6 + showSlides(slideIndex += n); 7 +} 8 + 9 +// Thumbnail image controls 10 +function currentSlide(n) { 11 + showSlides(slideIndex = n); 12 +} 13 + 14 +function showSlides(n) { 15 + let i; 16 + let slides = document.getElementsByClassName("mySlides"); 17 + let dots = document.getElementsByClassName("dot"); 18 + if (n > slides.length) {slideIndex = 1} 19 + if (n < 1) {slideIndex = slides.length} 20 + for (i = 0; i < slides.length; i++) { 21 + slides[i].style.display = "none"; 22 + } 23 + for (i = 0; i < dots.length; i++) { 24 + dots[i].className = dots[i].className.replace(" active", ""); 25 + } 26 + slides[slideIndex-1].style.display = "block"; 27 + dots[slideIndex-1].className += " active"; 28 +} - Use this extension
-
... ... @@ -1,0 +1,1 @@ 1 +always - Name
-
... ... @@ -1,0 +1,1 @@ 1 +Javascript Tryout - Parse content
-
... ... @@ -1,0 +1,1 @@ 1 +Yes