Changes for page Presentation Test Page
Last modified by Erik Bakker on 2024/07/30 14:39
From version 37.1
edited by Erik Bakker
on 2024/07/30 14:22
on 2024/07/30 14:22
Change comment:
There is no comment for this version
To version 41.1
edited by Erik Bakker
on 2024/07/30 14:26
on 2024/07/30 14:26
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
-
... ... @@ -42,10 +42,8 @@ 42 42 43 43 == Current slide == 44 44 45 - 46 - 47 47 {{html}} 48 - 46 +<html> 49 49 <body> 50 50 51 51 <!-- Define the slideshow container --> ... ... @@ -78,6 +78,8 @@ 78 78 </div> 79 79 </div> 80 80 </body> 79 + 80 +</html> 81 81 82 82 {{/html}} 83 83
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -1,0 +1,68 @@ 1 +/* Styling the area of the slides */ 2 +#slideshow { 3 + overflow: hidden; 4 + height: 1240px; 5 + width: 860px; 6 + margin: 0 auto; 7 +} 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; 15 +} 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; 27 +} 28 + 29 +/* Set the background color 30 + of each of the slides */ 31 +.slide:nth-child(1) { 32 + background: green; 33 +} 34 + 35 +.slide:nth-child(2) { 36 + background: pink; 37 +} 38 + 39 +.slide:nth-child(3) { 40 + background: red; 41 +} 42 + 43 +.slide:nth-child(4) { 44 + background: yellow; 45 +} 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 + } 68 +}