Changes for page Presentation Test Page
Last modified by Erik Bakker on 2024/07/30 14:39
From version 18.1
edited by Erik Bakker
on 2024/07/30 11:29
on 2024/07/30 11:29
Change comment:
There is no comment for this version
To version 42.1
edited by Erik Bakker
on 2024/07/30 14:29
on 2024/07/30 14:29
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -32,3 +32,51 @@ 32 32 | |[[image:Main.Images.Microlearning.WebHome@intermediate-emagiz-monitoring-runtime-stats-keymetrics-1]] 33 33 |[[image:Powerpoint xWiki background small.png||alt="xwiki powerpoint" height="73" style="float:left" width="100"]]| 34 34 35 +== Test slide == 36 +{{html}} 37 +<Div class="SC" id="s1s0"><img /><div id="s1s4" style="top:153.9902px;left:34.59945px;height:189.078px;width:529.7338px;"><pre class="pre0" style="left:7.200001px;top:146.328px;">Next generation runtime migration</pre></div><div id="s1s5" style="top:349.836px;left:34.59929px;height:91.41969px;width:529.7338px;"><pre class="pre1" style="left:7.199997px;top:0.9508972px;">Plan Q2 2023</pre></div></Div>{{/html}} 38 + 39 +== Next slide == 40 +{{html}} 41 +<Div class="SC" id="s2s0"><img /><div id="s2s2" style="top:28.75px;left:480px;height:105.5765px;width:415.0281px;"> </div><div id="s2s3" style="top:143.75px;left:480px;height:343.6036px;width:415.0281px;"> </div></Div>{{/html}} 42 + 43 +== Current slide == 44 + 45 +{{html}} 46 +<!-- Slideshow container --> 47 +<div class="slideshow-container"> 48 + 49 + <!-- Full-width images with number and caption text --> 50 + <div class="mySlides fade"> 51 + <div class="numbertext">1 / 3</div> 52 + <img src="img1.jpg" 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="img2.jpg" 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="img3.jpg" 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.StyleSheetExtension[0]
-
- Code
-
... ... @@ -1,59 +1,68 @@ 1 - .carousel{2 - background:#503d75;1 +/* Styling the area of the slides */ 2 +#slideshow { 3 3 overflow: hidden; 4 - margin: auto; 4 + height: 1240px; 5 + width: 860px; 6 + margin: 0 auto; 5 5 } 6 -.carousel { 7 - position: relative; 8 + 9 +/* Style each of the sides 10 + with a fixed width and height */ 11 +.slide { 12 + float: left; 13 + height: 1240px; 14 + width: 860px; 8 8 } 9 -.carousel-inner { 10 - position: relative; 11 - width: 100%; 12 - overflow: hidden; 16 + 17 +/* Add animation to the slides */ 18 +.slide-wrapper { 19 + 20 + /* Calculate the total width on the 21 + basis of number of slides */ 22 + width: calc(860px * 4); 23 + 24 + /* Specify the animation with the 25 + duration and speed */ 26 + animation: slide 10s ease infinite; 13 13 } 14 -.carousel .carousel-inner .carousel-item { 15 - font-size: 20px; 16 - page-break-after: always; 28 + 29 +/* Set the background color 30 + of each of the slides */ 31 +.slide:nth-child(1) { 32 + background: green; 17 17 } 18 -.carousel-inner > .item { 19 - position: relative; 20 - display: none; 21 - -webkit-transition: .6s ease-in-out left; 22 - -o-transition: .6s ease-in-out left; 23 - transition: .6s ease-in-out left; 34 + 35 +.slide:nth-child(2) { 36 + background: pink; 24 24 } 25 -.carousel .carousel-inner .carousel-item .carousel-item-slide { 26 - width: 100%; 27 - height: 100%; 28 - margin: auto; 29 - overflow: hidden; 30 - background-color: burlywood; 31 - box-shadow: 0 0 2px #888; 32 - display: table; 33 - table-layout: fixed; 38 + 39 +.slide:nth-child(3) { 40 + background: red; 34 34 } 35 -.carousel-item-slide { 36 - -webkit-text-size-adjust: 100%; 37 - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 38 - --rem: 16; 39 - font-family: Ubuntu, sans-serif; 40 - line-height: 1.428571429; 41 - color: #207e10; 42 - white-space: normal; 43 - font-size: 40px; 44 - box-sizing: border-box; 42 + 43 +.slide:nth-child(4) { 44 + background: yellow; 45 45 } 46 -.carousel .carousel-inner .carousel-item.header .carousel-item-slide-content { 47 - text-align: center; 48 - vertical-align: middle; 46 + 47 +/* Define the animation 48 + for the slideshow */ 49 +@keyframes slide { 50 + 51 + /* Calculate the margin-left for 52 + each of the slides */ 53 + 20% { 54 + margin-left: 0px; 55 + } 56 + 57 + 40% { 58 + margin-left: calc(-860px * 1); 59 + } 60 + 61 + 60% { 62 + margin-left: calc(-860px * 2); 63 + } 64 + 65 + 80% { 66 + margin-left: calc(-860px * 3); 67 + } 49 49 } 50 -.carousel .carousel-inner .carousel-item .carousel-item-slide .carousel-item-slide-content { 51 - font-family: 'Ubuntu, sans-serif'; 52 - display: table-cell; 53 - padding: 1em 4em 1em 4em; 54 -} 55 -.carousel .carousel-inner .carousel-item .carousel-item-slide .carousel-item-slide-content h2 { 56 - font-size: 3.1em; 57 - margin-bottom: .3em; 58 - color: green; 59 -}