@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (215) hide show
  1. package/data/AI_USAGE.md +425 -0
  2. package/data/CHANGELOG.md +53 -3
  3. package/data/component-catalog.json +62 -209
  4. package/data/components/README.md +281 -0
  5. package/data/components/action-bar.md +443 -0
  6. package/data/components/ai-busy-indicator.md +79 -0
  7. package/data/components/ai-loading-bar.md +66 -0
  8. package/data/components/avatar-btp.md +198 -0
  9. package/data/components/avatar-group.md +2660 -0
  10. package/data/components/avatar-product-switch.md +476 -0
  11. package/data/components/avatar.md +993 -0
  12. package/data/components/bar.md +574 -0
  13. package/data/components/border-radius.md +148 -0
  14. package/data/components/border.md +412 -0
  15. package/data/components/breadcrumb.md +546 -0
  16. package/data/components/button-2.md +440 -0
  17. package/data/components/button-action-sheet.md +292 -0
  18. package/data/components/button-ai.md +730 -0
  19. package/data/components/button-btp.md +223 -0
  20. package/data/components/button-button.md +233 -0
  21. package/data/components/button-counter.md +176 -0
  22. package/data/components/button-patterns.md +731 -0
  23. package/data/components/button-split.md +459 -0
  24. package/data/components/button.md +469 -0
  25. package/data/components/calendar.md +5784 -0
  26. package/data/components/card-card-media.md +707 -0
  27. package/data/components/card-card.md +2426 -0
  28. package/data/components/card-layouts.md +1201 -0
  29. package/data/components/card.md +2404 -0
  30. package/data/components/carousel.md +1506 -0
  31. package/data/components/code.md +139 -0
  32. package/data/components/component-reset.md +272 -0
  33. package/data/components/components-icons-businesssuiteinappsymbol-icons.md +85 -0
  34. package/data/components/components-icons-sap-icons.md +147 -0
  35. package/data/components/components-icons-tnt-icons.md +85 -0
  36. package/data/components/container-queries.md +221 -0
  37. package/data/components/container.md +227 -0
  38. package/data/components/dialog-docs-static-busy-indicator.md +165 -0
  39. package/data/components/dialog-docs-static-dialog.md +949 -0
  40. package/data/components/dialog-docs-static-patterns.md +147 -0
  41. package/data/components/dialog-docs-static-settings.md +528 -0
  42. package/data/components/dialog-docs-static.md +982 -0
  43. package/data/components/dialog.md +606 -0
  44. package/data/components/dynamic-page-dynamic-page.md +1914 -0
  45. package/data/components/dynamic-page.md +973 -0
  46. package/data/components/dynamic-side.md +197 -0
  47. package/data/components/elevation.md +110 -0
  48. package/data/components/feed-input.md +346 -0
  49. package/data/components/feed-list.md +580 -0
  50. package/data/components/fieldset-2.md +292 -0
  51. package/data/components/fieldset-forms.md +169 -0
  52. package/data/components/fieldset.md +381 -0
  53. package/data/components/flexible-column-layout.md +205 -0
  54. package/data/components/form-group.md +287 -0
  55. package/data/components/form-header.md +71 -0
  56. package/data/components/form-item-2.md +98 -0
  57. package/data/components/form-item-3.md +134 -0
  58. package/data/components/form-item-4.md +556 -0
  59. package/data/components/form-item-5.md +182 -0
  60. package/data/components/form-item-6.md +539 -0
  61. package/data/components/form-item-7.md +239 -0
  62. package/data/components/form-item-ai.md +158 -0
  63. package/data/components/form-item-file-uploader.md +445 -0
  64. package/data/components/form-item-forms.md +234 -0
  65. package/data/components/form-item-patterns.md +426 -0
  66. package/data/components/form-item.md +464 -0
  67. package/data/components/form-label-ai.md +126 -0
  68. package/data/components/form-label-layouts.md +306 -0
  69. package/data/components/form-label-patterns.md +1175 -0
  70. package/data/components/form-label-status-indicator.md +1083 -0
  71. package/data/components/form-label-step-input.md +620 -0
  72. package/data/components/form-label.md +2876 -0
  73. package/data/components/generic-tag.md +747 -0
  74. package/data/components/grid-list-grid-list.md +1185 -0
  75. package/data/components/grid-list.md +1449 -0
  76. package/data/components/heading.md +66 -0
  77. package/data/components/horizontal-navigation.md +568 -0
  78. package/data/components/icon-tab-bar-dev.md +190 -0
  79. package/data/components/icon-tab-bar.md +2620 -0
  80. package/data/components/icon.md +171 -0
  81. package/data/components/iconBusinessSuite.md +92 -0
  82. package/data/components/iconTnt.md +92 -0
  83. package/data/components/illustrated-message.md +439 -0
  84. package/data/components/info-label.md +348 -0
  85. package/data/components/input-group.md +2068 -0
  86. package/data/components/label.md +66 -0
  87. package/data/components/layout-grid.md +447 -0
  88. package/data/components/layout-panel.md +261 -0
  89. package/data/components/layouts-layout-grid.md +608 -0
  90. package/data/components/layouts-paddings.md +133 -0
  91. package/data/components/layouts-section.md +287 -0
  92. package/data/components/list-2.md +148 -0
  93. package/data/components/list-3.md +735 -0
  94. package/data/components/list-list.md +790 -0
  95. package/data/components/list-object-list.md +1225 -0
  96. package/data/components/list.md +1286 -0
  97. package/data/components/media-queries.md +168 -0
  98. package/data/components/menu.md +946 -0
  99. package/data/components/message-box-docs-static-ai.md +149 -0
  100. package/data/components/message-box-docs-static.md +527 -0
  101. package/data/components/message-page-upload-collection.md +678 -0
  102. package/data/components/message-page.md +256 -0
  103. package/data/components/message-strip.md +977 -0
  104. package/data/components/message-toast.md +119 -0
  105. package/data/components/micro-process-flow.md +991 -0
  106. package/data/components/navigation-menu.md +366 -0
  107. package/data/components/navigation-navigation.md +1245 -0
  108. package/data/components/navigation.md +2604 -0
  109. package/data/components/numeric-content.md +317 -0
  110. package/data/components/object-attribute.md +96 -0
  111. package/data/components/object-identifier.md +227 -0
  112. package/data/components/object-marker.md +202 -0
  113. package/data/components/object-number.md +327 -0
  114. package/data/components/object-status.md +1538 -0
  115. package/data/components/off-screen.md +87 -0
  116. package/data/components/overflow.md +97 -0
  117. package/data/components/padding.md +122 -0
  118. package/data/components/paddings.md +130 -0
  119. package/data/components/page.md +300 -0
  120. package/data/components/pagination.md +672 -0
  121. package/data/components/panel-layouts.md +345 -0
  122. package/data/components/panel.md +514 -0
  123. package/data/components/patterns-label.md +74 -0
  124. package/data/components/popover-2.md +906 -0
  125. package/data/components/popover-ai.md +466 -0
  126. package/data/components/popover-btp.md +886 -0
  127. package/data/components/popover-deprecated.md +308 -0
  128. package/data/components/popover-message-popover.md +683 -0
  129. package/data/components/popover-notification.md +1511 -0
  130. package/data/components/popover-patterns.md +1100 -0
  131. package/data/components/popover-popover.md +1862 -0
  132. package/data/components/popover-quick-view.md +385 -0
  133. package/data/components/popover-timepicker.md +1836 -0
  134. package/data/components/popover-user-menu.md +1303 -0
  135. package/data/components/popover.md +1938 -0
  136. package/data/components/progress-indicator.md +351 -0
  137. package/data/components/prompt-input-ai.md +226 -0
  138. package/data/components/prompt-input.md +226 -0
  139. package/data/components/rating-indicator.md +1469 -0
  140. package/data/components/resizable-card-layout.md +951 -0
  141. package/data/components/scrollbar.md +86 -0
  142. package/data/components/search-field.md +287 -0
  143. package/data/components/section.md +250 -0
  144. package/data/components/segmented-button.md +324 -0
  145. package/data/components/shellbar.md +2183 -0
  146. package/data/components/side-nav.md +1562 -0
  147. package/data/components/skeleton.md +243 -0
  148. package/data/components/slider.md +395 -0
  149. package/data/components/splitter.md +353 -0
  150. package/data/components/table.md +2749 -0
  151. package/data/components/tabs.md +658 -0
  152. package/data/components/text-text.md +380 -0
  153. package/data/components/text.md +253 -0
  154. package/data/components/tile.md +1132 -0
  155. package/data/components/time.md +818 -0
  156. package/data/components/title.md +153 -0
  157. package/data/components/titles.md +83 -0
  158. package/data/components/token.md +311 -0
  159. package/data/components/tokenizer.md +398 -0
  160. package/data/components/tool-header.md +1352 -0
  161. package/data/components/tool-layout.md +199 -0
  162. package/data/components/toolbar-ai.md +174 -0
  163. package/data/components/toolbar-btp.md +526 -0
  164. package/data/components/toolbar-title-bar.md +473 -0
  165. package/data/components/toolbar.md +432 -0
  166. package/data/components/tree.md +1031 -0
  167. package/data/components/typography.md +435 -0
  168. package/data/components/variant-management.md +360 -0
  169. package/data/components/vertical-nav.md +589 -0
  170. package/data/components/wizard.md +1429 -0
  171. package/data/examples/Components/dialog/device-specifications.example.html +39 -30
  172. package/data/examples/Components/shellbar/optional-items.example.html +210 -157
  173. package/data/examples/Components/shellbar/overflow-toolbar.example.html +202 -177
  174. package/data/examples/Components/shellbar/responsive-paddings.example.html +217 -146
  175. package/data/examples/Components/shellbar/responsiveness.example.html +825 -613
  176. package/data/examples/Components/user-menu/default.example.html +241 -83
  177. package/data/schemas/badge.schema.json +1 -1
  178. package/data/schemas/button-split.schema.json +1 -1
  179. package/data/schemas/component-frontmatter.schema.json +123 -0
  180. package/data/schemas/component-markdown.schema.json +81 -0
  181. package/data/schemas/counter.schema.json +1 -1
  182. package/data/schemas/dynamic-page.schema.json +1 -1
  183. package/data/schemas/dynamic-side-content.schema.json +1 -1
  184. package/data/schemas/facet.schema.json +1 -1
  185. package/data/schemas/fieldset.schema.json +1 -1
  186. package/data/schemas/flexible-column-layout.schema.json +1 -1
  187. package/data/schemas/form-group.schema.json +3 -2
  188. package/data/schemas/form-header.schema.json +1 -1
  189. package/data/schemas/form-label.schema.json +1 -0
  190. package/data/schemas/form-message.schema.json +1 -1
  191. package/data/schemas/grid-list.schema.json +1 -1
  192. package/data/schemas/input-group.schema.json +1 -1
  193. package/data/schemas/layout-panel.schema.json +1 -1
  194. package/data/schemas/page.schema.json +1 -1
  195. package/data/schemas/quick-view.schema.json +2 -1
  196. package/data/schemas/section.schema.json +1 -1
  197. package/data/schemas/side-nav.schema.json +1 -1
  198. package/data/schemas/splitter.schema.json +1 -1
  199. package/data/schemas/tabs.schema.json +1 -1
  200. package/data/schemas/tile.schema.json +1 -1
  201. package/data/schemas/tool-layout.schema.json +1 -1
  202. package/data/schemas/user-menu.schema.json +10 -0
  203. package/data/schemas/wizard.schema.json +1 -1
  204. package/package.json +1 -1
  205. package/src/data/load-catalog.d.ts +2 -0
  206. package/src/data/load-catalog.js +5 -1
  207. package/src/data/load-catalog.js.map +1 -1
  208. package/src/data/load-markdown-docs.d.ts +44 -0
  209. package/src/data/load-markdown-docs.js +179 -0
  210. package/src/data/load-markdown-docs.js.map +1 -0
  211. package/src/data/markdown-cache.d.ts +60 -0
  212. package/src/data/markdown-cache.js +218 -0
  213. package/src/data/markdown-cache.js.map +1 -0
  214. package/src/server.js +72 -1
  215. package/src/server.js.map +1 -1
package/data/components/carousel.md ADDED
@@ -0,0 +1,1506 @@
1
+ ---
2
+ component: fd-carousel
3
+ title: Components/Carousel
4
+ category: Components
5
+ selector: fd-carousel
6
+ cssFile: carousel.css
7
+ sourcePath: packages/styles/stories/Components/carousel/carousel.stories.js
8
+ tags: []
9
+ dependencies: ["button","carousel","icon","link","message-page"]
10
+ relatedComponents: ["button","carousel","icon","link","message-page"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.444Z
13
+ ---
14
+
15
+ # Components/Carousel
16
+
17
+ The carousel component is used for browsing through a set of images. One or several items can be displayed at a time, and the user can navigate to either the next or the previous item.
18
+
19
+ The size of the content area automatically adjusts depending on the available screen space. On non-touchable devices, the buttons on the left and right side of the content are used for navigation. The buttons either float on the left and right side or appear in the page indicator area. On touchable devices, the user navigates with a swipe gesture and the buttons are not displayed.
20
+
21
+ ## Usage
22
+ **Use the carousel if:**
23
+
24
+ - You want a strong visual representation of the items you want to display.
25
+ - You want to display items sequentially or side by side.
26
+
27
+ **Do not use the carousel if:**
28
+
29
+ - The items you want to display are uniform
30
+
31
+ ## Empty State
32
+
33
+ When no pages are loaded, carousel displays a **Message Page** with a \
34
+
35
+ ## When Not To Use
36
+
37
+ - The items you want to display are uniform
38
+
39
+ ## Dependencies
40
+
41
+ This component depends on the following CSS files:
42
+
43
+ - `button.css`
44
+ - `carousel.css`
45
+ - `icon.css`
46
+ - `link.css`
47
+ - `message-page.css`
48
+
49
+ ## Installation
50
+
51
+ ```bash
52
+ npm install fundamental-styles
53
+ ```
54
+
55
+ ```html
56
+ <!-- Include theme -->
57
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
58
+
59
+ <!-- Include component CSS -->
60
+ <link href="node_modules/fundamental-styles/dist/carousel.css" rel="stylesheet">
61
+
62
+ <!-- Include dependencies -->
63
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
64
+ <link href="node_modules/fundamental-styles/dist/carousel.css" rel="stylesheet">
65
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
66
+ <link href="node_modules/fundamental-styles/dist/link.css" rel="stylesheet">
67
+ <link href="node_modules/fundamental-styles/dist/message-page.css" rel="stylesheet">
68
+ ```
69
+
70
+ ## Basic Usage
71
+
72
+ ```html
73
+ <h4>Navigation buttons in page indicator (focussed)</h4>
74
+
75
+ <section
76
+ class="fd-carousel is-focus"
77
+ role="listbox"
78
+ aria-roledescription="Carousel"
79
+ aria-activedescendant="carousel-item-1"
80
+ >
81
+ <div class="fd-carousel__content">
82
+ <div class="fd-carousel__slides">
83
+ <div
84
+ role="option"
85
+ aria-setsize="1"
86
+ aria-posinset="1"
87
+ aria-selected="true"
88
+ aria-hidden="false"
89
+ id="carousel-item-1"
90
+ class="fd-carousel__item fd-carousel__item--active">
91
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
92
+ </div>
93
+ </div>
94
+
95
+ <div class="fd-carousel__page-indicator-container">
96
+ <button
97
+ role="button"
98
+ class="fd-button fd-carousel__button fd-carousel__button--left"
99
+ title="Previous Page"
100
+ >
101
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
102
+ </button>
103
+
104
+ <div class="fd-carousel__page-indicators">
105
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
106
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
107
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
108
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
109
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
110
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
111
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
112
+ </div>
113
+
114
+ <button
115
+ role="button"
116
+ class="fd-button fd-carousel__button fd-carousel__button--right"
117
+ title="Next Page"
118
+ >
119
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
120
+ </button>
121
+ </div>
122
+ </section>
123
+
124
+ <h4>Navigation buttons in page indicator (vertical)</h4>
125
+ <section
126
+ class="fd-carousel"
127
+ role="listbox"
128
+ aria-roledescription="Carousel"
129
+ aria-activedescendant="carousel-item-2"
130
+ >
131
+ <div class="fd-carousel__content">
132
+ <div class="fd-carousel__slides">
133
+ <div
134
+ role="option"
135
+ aria-setsize="1"
136
+ aria-posinset="1"
137
+ aria-selected="true"
138
+ aria-hidden="false"
139
+ id="carousel-item-2"
140
+ class="fd-carousel__item fd-carousel__item--active">
141
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
142
+ </div>
143
+ </div>
144
+
145
+ <div class="fd-carousel__page-indicator-container">
146
+ <button
147
+ role="button"
148
+ class="fd-button fd-carousel__button fd-carousel__button--left"
149
+ title="Previous Page"
150
+ >
151
+ <i class="sap-icon--slim-arrow-up" role="presentation" aria-hidden="true"></i>
152
+ </button>
153
+
154
+ <ol class="fd-carousel__page-indicators">
155
+ <li class="fd-carousel__page-indicator"></li>
156
+ <li class="fd-carousel__page-indicator"></li>
157
+ <li class="fd-carousel__page-indicator"></li>
158
+ <li class="fd-carousel__page-indicator"></li>
159
+ <li
160
+
161
+ aria-label="Displaying item 5 of 7"
162
+ class="fd-carousel__page-indicator fd-carousel__page-indicator--active"
163
+ ></li>
164
+ <li class="fd-carousel__page-indicator"></li>
165
+ <li class="fd-carousel__page-indicator"></li>
166
+ </ol>
167
+
168
+ <button
169
+ role="button"
170
+ class="fd-button fd-carousel__button fd-carousel__button--right"
171
+ title="Next Page"
172
+ >
173
+ <i class="sap-icon--slim-arrow-down" role="presentation" aria-hidden="true"></i>
174
+ </button>
175
+ </div>
176
+ </section>
177
+
178
+ <div role="region" id="carousel-1" aria-live="polite">Displaying item 1 of 7</div>
179
+
180
+ <h4>Content navigation buttons</h4>
181
+
182
+ <section
183
+ class="fd-carousel"
184
+ role="listbox"
185
+ aria-roledescription="Carousel"
186
+ aria-activedescendant="carousel-item-3"
187
+ >
188
+ <div class="fd-carousel__content">
189
+ <button
190
+ role="button"
191
+ class="fd-button fd-carousel__button fd-carousel__button--left"
192
+ title="Previous Page"
193
+ >
194
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
195
+ </button>
196
+
197
+ <div class="fd-carousel__slides">
198
+ <div
199
+ role="option"
200
+ aria-setsize="1"
201
+ aria-posinset="1"
202
+ aria-selected="true"
203
+ aria-hidden="false"
204
+ id="carousel-item-3"
205
+ class="fd-carousel__item fd-carousel__item--active">
206
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
207
+ </div>
208
+ </div>
209
+
210
+ <button
211
+ role="button"
212
+ class="fd-button fd-carousel__button fd-carousel__button--right"
213
+ title="Next Page"
214
+ >
215
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
216
+ </button>
217
+
218
+ <div class="fd-carousel__page-indicator-container">
219
+ <div class="fd-carousel__page-indicators">
220
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
221
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
222
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
223
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
224
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
225
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
226
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
227
+ </div>
228
+ </div>
229
+ </section>
230
+
231
+ <h4>Content navigation buttons (vertical)</h4>
232
+ <section
233
+ role="listbox"
234
+ aria-roledescription="Carousel"
235
+ aria-activedescendant="carousel-item-4"
236
+ class="fd-carousel"
237
+ >
238
+ <div class="fd-carousel__content">
239
+ <button
240
+ role="button"
241
+ class="fd-button fd-carousel__button fd-carousel__button--up"
242
+ title="Previous Page"
243
+ >
244
+ <i class="sap-icon--slim-arrow-up" role="presentation" aria-hidden="true"></i>
245
+ </button>
246
+
247
+ <div class="fd-carousel__slides">
248
+ <div
249
+ role="option"
250
+ aria-setsize="1"
251
+ aria-posinset="1"
252
+ aria-selected="true"
253
+ aria-hidden="false"
254
+ id="carousel-item-4"
255
+ class="fd-carousel__item fd-carousel__item--active">
256
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
257
+ </div>
258
+ </div>
259
+
260
+ <button
261
+ role="button"
262
+ class="fd-button fd-carousel__button fd-carousel__button--down"
263
+ title="Next Page"
264
+ >
265
+ <i class="sap-icon--slim-arrow-down" role="presentation" aria-hidden="true"></i>
266
+ </button>
267
+
268
+ <div class="fd-carousel__page-indicator-container">
269
+ <div class="fd-carousel__page-indicators">
270
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
271
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
272
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
273
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
274
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
275
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
276
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
277
+ </div>
278
+ </div>
279
+ </section>
280
+
281
+ <div role="region" id="carousel-2" aria-live="polite">Displaying item 1 of 7</div>
282
+
283
+ <h4>Numeric page indicator</h4>
284
+
285
+ <section
286
+ role="listbox"
287
+ aria-roledescription="Carousel"
288
+ aria-activedescendant="carousel-item-5"
289
+ class="fd-carousel"
290
+ >
291
+ <div class="fd-carousel__content">
292
+ <div class="fd-carousel__slides">
293
+ <div
294
+ role="option"
295
+ aria-setsize="1"
296
+ aria-posinset="1"
297
+ aria-selected="true"
298
+ aria-hidden="false"
299
+ id="carousel-item-5"
300
+ class="fd-carousel__item fd-carousel__item--active">
301
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
302
+ </div>
303
+ </div>
304
+
305
+ <div class="fd-carousel__page-indicator-container">
306
+ <button
307
+ role="button"
308
+ class="fd-button fd-carousel__button fd-carousel__button--left"
309
+ title="Previous Page"
310
+ >
311
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
312
+ </button>
313
+
314
+ <div class="fd-carousel__page-indicators">
315
+ <div class="fd-carousel__text">1 of 4</div>
316
+ </div>
317
+
318
+ <button
319
+ role="button"
320
+ class="fd-button fd-carousel__button fd-carousel__button--right"
321
+ title="Next Page"
322
+ >
323
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
324
+ </button>
325
+ </div>
326
+ </section>
327
+
328
+ <div role="region" id="carousel-3" aria-live="polite">Displaying item 1 of 7</div>
329
+
330
+ <h4>No page indicator</h4>
331
+
332
+ <section
333
+ role="listbox"
334
+ aria-roledescription="Carousel"
335
+ aria-activedescendant="carousel-item-6"
336
+ class="fd-carousel"
337
+ >
338
+ <div class="fd-carousel__content">
339
+ <button
340
+ role="button"
341
+ class="fd-button fd-carousel__button fd-carousel__button--left"
342
+ title="Previous Page"
343
+ >
344
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
345
+ </button>
346
+
347
+ <div class="fd-carousel__slides">
348
+ <div
349
+ role="option"
350
+ aria-setsize="1"
351
+ aria-posinset="1"
352
+ aria-selected="true"
353
+ aria-hidden="false"
354
+ id="carousel-item-6"
355
+ class="fd-carousel__item fd-carousel__item--active">
356
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
357
+ </div>
358
+ </div>
359
+
360
+ <button
361
+ role="button"
362
+ class="fd-button fd-carousel__button fd-carousel__button--right"
363
+ title="Next Page"
364
+ >
365
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
366
+ </button>
367
+ </section>
368
+
369
+ <div role="region" id="carousel-4" aria-live="polite">Displaying item 1 of 7</div>
370
+ ```
371
+
372
+ ## Modifiers
373
+
374
+ | Class | Description |
375
+ |-------|-------------|
376
+ | `fd-carousel--no-navigation` | Style variant |
377
+
378
+ ## States
379
+
380
+ | Class | Description |
381
+ |-------|-------------|
382
+ | `is-focus` | Focus state |
383
+
384
+ ## BEM Elements
385
+
386
+ This component uses the following BEM elements:
387
+
388
+ - `fd-carousel__button`
389
+ - `fd-carousel__button--down`
390
+ - `fd-carousel__button--left`
391
+ - `fd-carousel__button--right`
392
+ - `fd-carousel__button--up`
393
+ - `fd-carousel__content`
394
+ - `fd-carousel__content--horizontal`
395
+ - `fd-carousel__content--solid`
396
+ - `fd-carousel__content--transparent`
397
+ - `fd-carousel__item`
398
+ - `fd-carousel__item--active`
399
+ - `fd-carousel__page-indicator`
400
+ - `fd-carousel__page-indicator--active`
401
+ - `fd-carousel__page-indicator-container`
402
+ - `fd-carousel__page-indicator-container--no-border`
403
+ - `fd-carousel__page-indicator-container--translucent`
404
+ - `fd-carousel__page-indicator-container--transparent`
405
+ - `fd-carousel__page-indicators`
406
+ - `fd-carousel__slides`
407
+ - `fd-carousel__text`
408
+
409
+ ## Related Components
410
+
411
+ This component works with or depends on:
412
+
413
+ - `button`
414
+ - `carousel`
415
+ - `icon`
416
+ - `link`
417
+ - `message-page`
418
+
419
+ ## Design Tokens
420
+
421
+ Key CSS variables used by this component:
422
+
423
+ - `--active`
424
+ - `--down`
425
+ - `--fdButton_Focus_Border_Radius`
426
+ - `--fdCarousel_Button_Display`
427
+ - `--fdCarousel_Content_Background`
428
+ - `--fdCarousel_Dot_Background`
429
+ - `--fdCarousel_Dot_Border`
430
+ - `--fdCarousel_Dot_Margin`
431
+ - `--fdCarousel_Dot_Selected_Background`
432
+ - `--fdCarousel_Dot_Selected_Border`
433
+ - `--fdCarousel_Dot_Size`
434
+ - `--fdCarousel_Page_Indicator_Background_Color`
435
+ - `--fdCarousel_Page_Indicator_Border`
436
+ - `--fdCarousel_Page_Indicator_Container_Background`
437
+ - `--fdCarousel_Page_Indicator_Margin`
438
+
439
+ *...and 5 more*
440
+
441
+ ## Examples
442
+
443
+ ### Bottom page indicator
444
+
445
+ The bottom page indicator carousel displays a content area, navigation buttons and a page indicator at the bottom. The page indicator wraps onto the next line if the content is too long, and after the pages reach a count of 8, the dots are replaced by numerical representation i.e. *1 of 4*.
446
+
447
+ ```html
448
+ <h4>Navigation buttons in page indicator (focussed)</h4>
449
+
450
+ <section
451
+ class="fd-carousel is-focus"
452
+ role="listbox"
453
+ aria-roledescription="Carousel"
454
+ aria-activedescendant="carousel-item-1"
455
+ >
456
+ <div class="fd-carousel__content">
457
+ <div class="fd-carousel__slides">
458
+ <div
459
+ role="option"
460
+ aria-setsize="1"
461
+ aria-posinset="1"
462
+ aria-selected="true"
463
+ aria-hidden="false"
464
+ id="carousel-item-1"
465
+ class="fd-carousel__item fd-carousel__item--active">
466
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
467
+ </div>
468
+ </div>
469
+
470
+ <div class="fd-carousel__page-indicator-container">
471
+ <button
472
+ role="button"
473
+ class="fd-button fd-carousel__button fd-carousel__button--left"
474
+ title="Previous Page"
475
+ >
476
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
477
+ </button>
478
+
479
+ <div class="fd-carousel__page-indicators">
480
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
481
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
482
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
483
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
484
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
485
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
486
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
487
+ </div>
488
+
489
+ <button
490
+ role="button"
491
+ class="fd-button fd-carousel__button fd-carousel__button--right"
492
+ title="Next Page"
493
+ >
494
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
495
+ </button>
496
+ </div>
497
+ </section>
498
+
499
+ <h4>Navigation buttons in page indicator (vertical)</h4>
500
+ <section
501
+ class="fd-carousel"
502
+ role="listbox"
503
+ aria-roledescription="Carousel"
504
+ aria-activedescendant="carousel-item-2"
505
+ >
506
+ <div class="fd-carousel__content">
507
+ <div class="fd-carousel__slides">
508
+ <div
509
+ role="option"
510
+ aria-setsize="1"
511
+ aria-posinset="1"
512
+ aria-selected="true"
513
+ aria-hidden="false"
514
+ id="carousel-item-2"
515
+ class="fd-carousel__item fd-carousel__item--active">
516
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
517
+ </div>
518
+ </div>
519
+
520
+ <div class="fd-carousel__page-indicator-container">
521
+ <button
522
+ role="button"
523
+ class="fd-button fd-carousel__button fd-carousel__button--left"
524
+ title="Previous Page"
525
+ >
526
+ <i class="sap-icon--slim-arrow-up" role="presentation" aria-hidden="true"></i>
527
+ </button>
528
+
529
+ <ol class="fd-carousel__page-indicators">
530
+ <li class="fd-carousel__page-indicator"></li>
531
+ <li class="fd-carousel__page-indicator"></li>
532
+ <li class="fd-carousel__page-indicator"></li>
533
+ <li class="fd-carousel__page-indicator"></li>
534
+ <li
535
+
536
+ aria-label="Displaying item 5 of 7"
537
+ class="fd-carousel__page-indicator fd-carousel__page-indicator--active"
538
+ ></li>
539
+ <li class="fd-carousel__page-indicator"></li>
540
+ <li class="fd-carousel__page-indicator"></li>
541
+ </ol>
542
+
543
+ <button
544
+ role="button"
545
+ class="fd-button fd-carousel__button fd-carousel__button--right"
546
+ title="Next Page"
547
+ >
548
+ <i class="sap-icon--slim-arrow-down" role="presentation" aria-hidden="true"></i>
549
+ </button>
550
+ </div>
551
+ </section>
552
+
553
+ <div role="region" id="carousel-1" aria-live="polite">Displaying item 1 of 7</div>
554
+
555
+ <h4>Content navigation buttons</h4>
556
+
557
+ <section
558
+ class="fd-carousel"
559
+ role="listbox"
560
+ aria-roledescription="Carousel"
561
+ aria-activedescendant="carousel-item-3"
562
+ >
563
+ <div class="fd-carousel__content">
564
+ <button
565
+ role="button"
566
+ class="fd-button fd-carousel__button fd-carousel__button--left"
567
+ title="Previous Page"
568
+ >
569
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
570
+ </button>
571
+
572
+ <div class="fd-carousel__slides">
573
+ <div
574
+ role="option"
575
+ aria-setsize="1"
576
+ aria-posinset="1"
577
+ aria-selected="true"
578
+ aria-hidden="false"
579
+ id="carousel-item-3"
580
+ class="fd-carousel__item fd-carousel__item--active">
581
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
582
+ </div>
583
+ </div>
584
+
585
+ <button
586
+ role="button"
587
+ class="fd-button fd-carousel__button fd-carousel__button--right"
588
+ title="Next Page"
589
+ >
590
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
591
+ </button>
592
+
593
+ <div class="fd-carousel__page-indicator-container">
594
+ <div class="fd-carousel__page-indicators">
595
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
596
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
597
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
598
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
599
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
600
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
601
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
602
+ </div>
603
+ </div>
604
+ </section>
605
+
606
+ <h4>Content navigation buttons (vertical)</h4>
607
+ <section
608
+ role="listbox"
609
+ aria-roledescription="Carousel"
610
+ aria-activedescendant="carousel-item-4"
611
+ class="fd-carousel"
612
+ >
613
+ <div class="fd-carousel__content">
614
+ <button
615
+ role="button"
616
+ class="fd-button fd-carousel__button fd-carousel__button--up"
617
+ title="Previous Page"
618
+ >
619
+ <i class="sap-icon--slim-arrow-up" role="presentation" aria-hidden="true"></i>
620
+ </button>
621
+
622
+ <div class="fd-carousel__slides">
623
+ <div
624
+ role="option"
625
+ aria-setsize="1"
626
+ aria-posinset="1"
627
+ aria-selected="true"
628
+ aria-hidden="false"
629
+ id="carousel-item-4"
630
+ class="fd-carousel__item fd-carousel__item--active">
631
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
632
+ </div>
633
+ </div>
634
+
635
+ <button
636
+ role="button"
637
+ class="fd-button fd-carousel__button fd-carousel__button--down"
638
+ title="Next Page"
639
+ >
640
+ <i class="sap-icon--slim-arrow-down" role="presentation" aria-hidden="true"></i>
641
+ </button>
642
+
643
+ <div class="fd-carousel__page-indicator-container">
644
+ <div class="fd-carousel__page-indicators">
645
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
646
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
647
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
648
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
649
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
650
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
651
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
652
+ </div>
653
+ </div>
654
+ </section>
655
+
656
+ <div role="region" id="carousel-2" aria-live="polite">Displaying item 1 of 7</div>
657
+
658
+ <h4>Numeric page indicator</h4>
659
+
660
+ <section
661
+ role="listbox"
662
+ aria-roledescription="Carousel"
663
+ aria-activedescendant="carousel-item-5"
664
+ class="fd-carousel"
665
+ >
666
+ <div class="fd-carousel__content">
667
+ <div class="fd-carousel__slides">
668
+ <div
669
+ role="option"
670
+ aria-setsize="1"
671
+ aria-posinset="1"
672
+ aria-selected="true"
673
+ aria-hidden="false"
674
+ id="carousel-item-5"
675
+ class="fd-carousel__item fd-carousel__item--active">
676
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
677
+ </div>
678
+ </div>
679
+
680
+ <div class="fd-carousel__page-indicator-container">
681
+ <button
682
+ role="button"
683
+ class="fd-button fd-carousel__button fd-carousel__button--left"
684
+ title="Previous Page"
685
+ >
686
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
687
+ </button>
688
+
689
+ <div class="fd-carousel__page-indicators">
690
+ <div class="fd-carousel__text">1 of 4</div>
691
+ </div>
692
+
693
+ <button
694
+ role="button"
695
+ class="fd-button fd-carousel__button fd-carousel__button--right"
696
+ title="Next Page"
697
+ >
698
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
699
+ </button>
700
+ </div>
701
+ </section>
702
+
703
+ <div role="region" id="carousel-3" aria-live="polite">Displaying item 1 of 7</div>
704
+
705
+ <h4>No page indicator</h4>
706
+
707
+ <section
708
+ role="listbox"
709
+ aria-roledescription="Carousel"
710
+ aria-activedescendant="carousel-item-6"
711
+ class="fd-carousel"
712
+ >
713
+ <div class="fd-carousel__content">
714
+ <button
715
+ role="button"
716
+ class="fd-button fd-carousel__button fd-carousel__button--left"
717
+ title="Previous Page"
718
+ >
719
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
720
+ </button>
721
+
722
+ <div class="fd-carousel__slides">
723
+ <div
724
+ role="option"
725
+ aria-setsize="1"
726
+ aria-posinset="1"
727
+ aria-selected="true"
728
+ aria-hidden="false"
729
+ id="carousel-item-6"
730
+ class="fd-carousel__item fd-carousel__item--active">
731
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
732
+ </div>
733
+ </div>
734
+
735
+ <button
736
+ role="button"
737
+ class="fd-button fd-carousel__button fd-carousel__button--right"
738
+ title="Next Page"
739
+ >
740
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
741
+ </button>
742
+ </section>
743
+
744
+ <div role="region" id="carousel-4" aria-live="polite">Displaying item 1 of 7</div>
745
+ ```
746
+
747
+ ### Top page indicator
748
+
749
+ The top page indicator carousel displays a content area, navigation buttons and a page indicator at the top.
750
+
751
+ ```html
752
+ <h4>Navigation buttons in page indicator</h4>
753
+
754
+ <section
755
+ class="fd-carousel"
756
+ role="listbox"
757
+ aria-roledescription="Carousel"
758
+ aria-activedescendant="carousel-item-1"
759
+
760
+ >
761
+ <div class="fd-carousel__page-indicator-container">
762
+ <button
763
+ role="button"
764
+ class="fd-button fd-carousel__button fd-carousel__button--left"
765
+ title="Previous Page">
766
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
767
+ </button>
768
+
769
+ <div class="fd-carousel__page-indicators">
770
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
771
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
772
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
773
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
774
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
775
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
776
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
777
+
778
+ <button
779
+ role="button"
780
+ class="fd-button fd-carousel__button fd-carousel__button--right"
781
+ title="Next Page">
782
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
783
+ </button>
784
+ </div>
785
+
786
+ <div class="fd-carousel__content">
787
+ <div class="fd-carousel__slides">
788
+ <div
789
+ role="option"
790
+ aria-setsize="1"
791
+ aria-posinset="1"
792
+ aria-selected="true"
793
+ aria-hidden="false"
794
+ id="carousel-item-1"
795
+ class="fd-carousel__item fd-carousel__item--active">
796
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture">
797
+ </div>
798
+ </div>
799
+ </div>
800
+ </section>
801
+
802
+ <div role="region" id="carousel-5" aria-live="polite">
803
+ Displaying item 1 of 7
804
+ </div>
805
+
806
+ <h4>Navigation buttons in content</h4>
807
+
808
+ <section
809
+ class="fd-carousel"
810
+ role="listbox"
811
+ aria-roledescription="Carousel"
812
+ aria-activedescendant="carousel-item-2"
813
+
814
+ >
815
+ <div class="fd-carousel__page-indicator-container">
816
+ <div class="fd-carousel__page-indicators">
817
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
818
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
819
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
820
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
821
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
822
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
823
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
824
+ </div>
825
+ </div>
826
+
827
+ <div class="fd-carousel__content">
828
+ <button
829
+ role="button"
830
+ class="fd-button fd-carousel__button fd-carousel__button--left"
831
+ title="Previous Page">
832
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
833
+ </button>
834
+
835
+ <div class="fd-carousel__slides">
836
+ <div
837
+ role="option"
838
+ aria-setsize="1"
839
+ aria-posinset="1"
840
+ aria-selected="true"
841
+ aria-hidden="false"
842
+ id="carousel-item-2"
843
+ class="fd-carousel__item fd-carousel__item--active">
844
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture">
845
+ </div>
846
+ </div>
847
+
848
+ <button
849
+ role="button"
850
+ class="fd-button fd-carousel__button fd-carousel__button--right"
851
+ title="Next Page">
852
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
853
+ </button>
854
+ </section>
855
+
856
+ <div role="region" id="carousel-6" aria-live="polite">
857
+ Displaying item 1 of 7
858
+ </div>
859
+
860
+ <h4>Numeral format for page indicator</h4>
861
+
862
+ <section
863
+ class="fd-carousel"
864
+ role="listbox"
865
+ aria-roledescription="Carousel"
866
+ aria-activedescendant="carousel-item-3"
867
+
868
+ >
869
+ <div class="fd-carousel__page-indicator-container">
870
+ <div class="fd-carousel__page-indicators">
871
+ <div class="fd-carousel__text">1 of 4</div>
872
+ </div>
873
+ </div>
874
+
875
+ <div class="fd-carousel__content">
876
+ <button
877
+ role="button"
878
+ class="fd-button fd-carousel__button fd-carousel__button--left"
879
+ title="Previous Page">
880
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
881
+ </button>
882
+
883
+ <div class="fd-carousel__slides">
884
+ <div
885
+ role="option"
886
+ aria-setsize="1"
887
+ aria-posinset="1"
888
+ aria-selected="true"
889
+ aria-hidden="false"
890
+ id="carousel-item-3"
891
+ class="fd-carousel__item fd-carousel__item--active">
892
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture">
893
+ </div>
894
+ </div>
895
+
896
+ <button
897
+ role="button"
898
+ class="fd-button fd-carousel__button fd-carousel__button--right"
899
+ title="Next Page">
900
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
901
+ </button>
902
+ </section>
903
+
904
+ <div role="region" id="carousel-7" aria-live="polite">
905
+ Displaying item 1 of 7
906
+ </div>
907
+
908
+ <h4>No page indicators</h4>
909
+
910
+ <section
911
+ class="fd-carousel"
912
+ role="listbox"
913
+ aria-roledescription="Carousel"
914
+ aria-activedescendant="carousel-item-4"
915
+
916
+ >
917
+ <div class="fd-carousel__page-indicator-container">
918
+ <button
919
+ role="button"
920
+ class="fd-button fd-carousel__button fd-carousel__button--left"
921
+ title="Previous Page">
922
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
923
+ </button>
924
+
925
+ <button
926
+ role="button"
927
+ class="fd-button fd-carousel__button fd-carousel__button--right"
928
+ title="Next Page">
929
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
930
+ </button>
931
+ </div>
932
+
933
+ <div class="fd-carousel__content">
934
+ <div class="fd-carousel__slides">
935
+ <div
936
+ role="option"
937
+ aria-setsize="1"
938
+ aria-posinset="1"
939
+ aria-selected="true"
940
+ aria-hidden="false"
941
+ id="carousel-item-4"
942
+ class="fd-carousel__item fd-carousel__item--active">
943
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture">
944
+ </div>
945
+ </div>
946
+ </section>
947
+
948
+ <div role="region" id="carousel-8" aria-live="polite">
949
+ Displaying item 1 of 7
950
+ </div>
951
+ ```
952
+
953
+ ### Hidden navigation buttons
954
+
955
+ Carousel can also be displayed without navigation buttons. To hide them, add the \
956
+
957
+ ```html
958
+ <h4>Hiding navigation buttons in page indicator</h4>
959
+
960
+ <section
961
+ role="listbox"
962
+ aria-roledescription="Carousel"
963
+ aria-activedescendant="carousel-item-1"
964
+ class="fd-carousel fd-carousel--no-navigation"
965
+
966
+ >
967
+ <div class="fd-carousel__content">
968
+ <div class="fd-carousel__slides">
969
+ <div
970
+ role="option"
971
+ aria-setsize="1"
972
+ aria-posinset="1"
973
+ aria-selected="true"
974
+ aria-hidden="false"
975
+ id="carousel-item-1"
976
+ class="fd-carousel__item fd-carousel__item--active">
977
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture">
978
+ </div>
979
+ </div>
980
+
981
+ <div class="fd-carousel__page-indicator-container">
982
+ <button
983
+ class="fd-button fd-carousel__button fd-carousel__button--left"
984
+ title="Previous Page">
985
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
986
+ </button>
987
+
988
+ <div class="fd-carousel__page-indicators">
989
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
990
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
991
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
992
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
993
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
994
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
995
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
996
+ </div>
997
+
998
+ <button
999
+ class="fd-button fd-carousel__button fd-carousel__button--right"
1000
+ title="Next Page">
1001
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
1002
+ </button>
1003
+ </div>
1004
+ </section>
1005
+
1006
+ <div role="region" id="carousel-9" aria-live="polite">
1007
+ Displaying item 1 of 7
1008
+ </div>
1009
+
1010
+ <h4>Hiding navigation buttons in the content</h4>
1011
+
1012
+ <section
1013
+ role="listbox"
1014
+ aria-roledescription="Carousel"
1015
+ aria-activedescendant="carousel-item-2"
1016
+ class="fd-carousel fd-carousel--no-navigation"
1017
+
1018
+ >
1019
+ <div class="fd-carousel__page-indicator-container">
1020
+ <div class="fd-carousel__page-indicators">
1021
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
1022
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
1023
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
1024
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
1025
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
1026
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
1027
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
1028
+ </div>
1029
+ </div>
1030
+
1031
+ <div class="fd-carousel__content">
1032
+ <button
1033
+ class="fd-button fd-carousel__button fd-carousel__button--left"
1034
+ title="Previous Page">
1035
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
1036
+ </button>
1037
+
1038
+ <div class="fd-carousel__slides">
1039
+ <div
1040
+ role="option"
1041
+ aria-setsize="1"
1042
+ aria-posinset="1"
1043
+ aria-selected="true"
1044
+ aria-hidden="false"
1045
+ id="carousel-item-2"
1046
+ class="fd-carousel__item fd-carousel__item--active">
1047
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture">
1048
+ </div>
1049
+ </div>
1050
+
1051
+ <button
1052
+ class="fd-button fd-carousel__button fd-carousel__button--right"
1053
+ title="Next Page">
1054
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
1055
+ </button>
1056
+ </section>
1057
+
1058
+ <div role="region" id="carousel-10" aria-live="polite">
1059
+ Displaying item 1 of 7
1060
+ </div>
1061
+ ```
1062
+
1063
+ ### Background modifiers
1064
+
1065
+ The background of the Carousel Content and Page Indicator Container can be changed by modifier classes. <br><b>Carousel Content</b><br>The <b>default</b> background for the Carousel Content is <b>translucent</b>. For <b>transparent</b> background apply \
1066
+
1067
+ ```html
1068
+ <h4>Transparent Carousel Content</h4>
1069
+
1070
+ <section
1071
+ class="fd-carousel"
1072
+ role="listbox"
1073
+ aria-roledescription="Carousel"
1074
+ aria-activedescendant="carousel-item-1"
1075
+ >
1076
+
1077
+ <div class="fd-carousel__content fd-carousel__content--transparent">
1078
+ <div class="fd-carousel__slides">
1079
+ <div
1080
+ role="option"
1081
+ aria-setsize="1"
1082
+ aria-posinset="1"
1083
+ aria-selected="true"
1084
+ aria-hidden="false"
1085
+ id="carousel-item-1"
1086
+ class="fd-carousel__item fd-carousel__item--active">
1087
+ <span></span>
1088
+ </div>
1089
+ </div>
1090
+
1091
+ <div class="fd-carousel__page-indicator-container">
1092
+ <button
1093
+ role="button"
1094
+ class="fd-button fd-carousel__button fd-carousel__button--left"
1095
+ title="Previous Page"
1096
+ >
1097
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
1098
+ </button>
1099
+
1100
+ <div class="fd-carousel__page-indicators">
1101
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
1102
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
1103
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
1104
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
1105
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
1106
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
1107
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
1108
+ </div>
1109
+
1110
+ <button
1111
+ role="button"
1112
+ class="fd-button fd-carousel__button fd-carousel__button--right"
1113
+ title="Next Page"
1114
+ >
1115
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
1116
+ </button>
1117
+ </div>
1118
+ </section>
1119
+
1120
+ <h4>Solid Carousel Content</h4>
1121
+ <section
1122
+ class="fd-carousel"
1123
+ role="listbox"
1124
+ aria-roledescription="Carousel"
1125
+ aria-activedescendant="carousel-item-2"
1126
+ >
1127
+
1128
+ <div class="fd-carousel__content fd-carousel__content--solid">
1129
+ <div class="fd-carousel__slides">
1130
+ <div
1131
+ role="option"
1132
+ aria-setsize="1"
1133
+ aria-posinset="1"
1134
+ aria-selected="true"
1135
+ aria-hidden="false"
1136
+ id="carousel-item-2"
1137
+ class="fd-carousel__item fd-carousel__item--active">
1138
+ <span></span>
1139
+ </div>
1140
+ </div>
1141
+
1142
+ <div class="fd-carousel__page-indicator-container">
1143
+ <button
1144
+ role="button"
1145
+ class="fd-button fd-carousel__button fd-carousel__button--left"
1146
+ title="Previous Page"
1147
+ >
1148
+ <i class="sap-icon--slim-arrow-up" role="presentation" aria-hidden="true"></i>
1149
+ </button>
1150
+
1151
+ <div class="fd-carousel__page-indicators">
1152
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
1153
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
1154
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
1155
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
1156
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
1157
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
1158
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
1159
+ </div>
1160
+
1161
+ <button
1162
+ role="button"
1163
+ class="fd-button fd-carousel__button fd-carousel__button--right"
1164
+ title="Next Page"
1165
+ >
1166
+ <i class="sap-icon--slim-arrow-down" role="presentation" aria-hidden="true"></i>
1167
+ </button>
1168
+ </div>
1169
+ </section>
1170
+
1171
+ <div role="region" id="carousel-1" aria-live="polite">Displaying item 1 of 4</div>
1172
+
1173
+ <h4>Transparent Page Indicator Container</h4>
1174
+
1175
+ <section
1176
+ class="fd-carousel"
1177
+ role="listbox"
1178
+ aria-roledescription="Carousel"
1179
+ aria-activedescendant="carousel-item-3"
1180
+ >
1181
+
1182
+ <div class="fd-carousel__content">
1183
+ <button
1184
+ role="button"
1185
+ class="fd-button fd-carousel__button fd-carousel__button--left"
1186
+ title="Previous Page"
1187
+ >
1188
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
1189
+ </button>
1190
+
1191
+ <div class="fd-carousel__slides">
1192
+ <div
1193
+ role="option"
1194
+ aria-setsize="1"
1195
+ aria-posinset="1"
1196
+ aria-selected="true"
1197
+ aria-hidden="false"
1198
+ id="carousel-item-3"
1199
+ class="fd-carousel__item fd-carousel__item--active">
1200
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
1201
+ </div>
1202
+ </div>
1203
+
1204
+ <button
1205
+ role="button"
1206
+ class="fd-button fd-carousel__button fd-carousel__button--right"
1207
+ title="Next Page"
1208
+ >
1209
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
1210
+ </button>
1211
+
1212
+ <div class="fd-carousel__page-indicator-container fd-carousel__page-indicator-container--transparent">
1213
+ <div class="fd-carousel__page-indicators">
1214
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
1215
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
1216
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
1217
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
1218
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
1219
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
1220
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
1221
+ </div>
1222
+ </div>
1223
+ </section>
1224
+
1225
+ <h4>Translucent Page Indicator Container</h4>
1226
+ <section
1227
+ class="fd-carousel"
1228
+ role="listbox"
1229
+ aria-roledescription="Carousel"
1230
+ aria-activedescendant="carousel-item-4"
1231
+ >
1232
+
1233
+ <div class="fd-carousel__content">
1234
+ <button
1235
+ role="button"
1236
+ class="fd-button fd-carousel__button fd-carousel__button--up"
1237
+ title="Previous Page"
1238
+ >
1239
+ <i class="sap-icon--slim-arrow-up" role="presentation" aria-hidden="true"></i>
1240
+ </button>
1241
+
1242
+ <div class="fd-carousel__slides">
1243
+ <div
1244
+ role="option"
1245
+ aria-setsize="1"
1246
+ aria-posinset="1"
1247
+ aria-selected="true"
1248
+ aria-hidden="false"
1249
+ id="carousel-item-4"
1250
+ class="fd-carousel__item fd-carousel__item--active">
1251
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
1252
+ </div>
1253
+ </div>
1254
+
1255
+ <button
1256
+ role="button"
1257
+ class="fd-button fd-carousel__button fd-carousel__button--down"
1258
+ title="Next Page"
1259
+ >
1260
+ <i class="sap-icon--slim-arrow-down" role="presentation" aria-hidden="true"></i>
1261
+ </button>
1262
+
1263
+ <div class="fd-carousel__page-indicator-container fd-carousel__page-indicator-container--translucent">
1264
+ <div class="fd-carousel__page-indicators">
1265
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
1266
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
1267
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
1268
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
1269
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
1270
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
1271
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
1272
+ </div>
1273
+ </div>
1274
+ </section>
1275
+
1276
+ <h4>Page Indicator Container with no border</h4>
1277
+
1278
+ <section
1279
+ class="fd-carousel"
1280
+ role="listbox"
1281
+ aria-roledescription="Carousel"
1282
+ aria-activedescendant="carousel-item-5"
1283
+ >
1284
+
1285
+ <div class="fd-carousel__content fd-carousel__content--solid">
1286
+ <div class="fd-carousel__slides">
1287
+ <div
1288
+ role="option"
1289
+ aria-setsize="1"
1290
+ aria-posinset="1"
1291
+ aria-selected="true"
1292
+ aria-hidden="false"
1293
+ id="carousel-item-5"
1294
+ class="fd-carousel__item fd-carousel__item--active">
1295
+ <span></span>
1296
+ </div>
1297
+ </div>
1298
+
1299
+ <div class="fd-carousel__page-indicator-container fd-carousel__page-indicator-container--no-border">
1300
+ <button
1301
+ role="button"
1302
+ class="fd-button fd-carousel__button fd-carousel__button--left"
1303
+ title="Previous Page"
1304
+ >
1305
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
1306
+ </button>
1307
+
1308
+ <div class="fd-carousel__page-indicators">
1309
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
1310
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
1311
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
1312
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
1313
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
1314
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
1315
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
1316
+ </div>
1317
+
1318
+ <button
1319
+ role="button"
1320
+ class="fd-button fd-carousel__button fd-carousel__button--right"
1321
+ title="Next Page"
1322
+ >
1323
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
1324
+ </button>
1325
+ </div>
1326
+ </section>
1327
+
1328
+ <div role="region" id="carousel-2" aria-live="polite">Displaying item 1 of 4</div>
1329
+ ```
1330
+
1331
+ ### Items in horizontal direction
1332
+
1333
+ Carousel will have items which will spread horizontally and will be visible on navigation. For translate animation effect to work, all items should be in DOM.
1334
+
1335
+ ```html
1336
+ <h4>Items in horizontal direction</h4>
1337
+
1338
+ <section
1339
+ class="fd-carousel"
1340
+ role="listbox"
1341
+ aria-roledescription="Carousel"
1342
+ aria-activedescendant="carousel-item-1"
1343
+
1344
+ >
1345
+ <div class="fd-carousel__content fd-carousel__content--horizontal">
1346
+ <div class="fd-carousel__slides">
1347
+ <div
1348
+ role="option"
1349
+ aria-setsize="1"
1350
+ aria-posinset="1"
1351
+ aria-selected="true"
1352
+ aria-hidden="false"
1353
+ id="carousel-item-1"
1354
+ class="fd-carousel__item fd-carousel__item--active">
1355
+ <img src="https://placehold.co/320x200" alt="Example picture" aria-label="Example picture" />
1356
+ </div>
1357
+ </div>
1358
+
1359
+ <div class="fd-carousel__page-indicator-container">
1360
+ <button
1361
+ role="button"
1362
+ class="fd-button fd-carousel__button fd-carousel__button--left"
1363
+ title="Previous Page">
1364
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
1365
+ </button>
1366
+
1367
+ <div class="fd-carousel__page-indicators">
1368
+ <div class="fd-carousel__page-indicators">
1369
+ <span role="img" aria-label="Item 1 of 3 displayed" class="fd-carousel__page-indicator"></span>
1370
+ <span role="img" aria-label="Item 2 of 3 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
1371
+ <span role="img" aria-label="Item 3 of 3 displayed" class="fd-carousel__page-indicator"></span>
1372
+ </div>
1373
+ </div>
1374
+
1375
+ <button
1376
+ role="button"
1377
+ class="fd-button fd-carousel__button fd-carousel__button--right"
1378
+ title="Next Page">
1379
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
1380
+ </button>
1381
+ </div>
1382
+ </section>
1383
+
1384
+ <div role="region" id="carousel-11" aria-live="polite">
1385
+ Displaying item 2 of 3
1386
+ </div>
1387
+ ```
1388
+
1389
+ ### Items loading error
1390
+
1391
+ Error message can be displayed when items could not be loaded. Error message can be composed using Message page component. For mixed data use <code>sapIllus-Scene-ReloadScreen</code> illustration, and for images in Carousel use <code>sapIllus-Dialog-UnableToLoadImage</code> illustration.
1392
+
1393
+ ```html
1394
+ <h4>Mixed Data in Carousel</h4>
1395
+ <section
1396
+ class="fd-carousel fd-carousel--no-navigation"
1397
+ role="listbox"
1398
+ aria-roledescription="Carousel"
1399
+ aria-activedescendant="carousel-item-1"
1400
+
1401
+ >
1402
+ <div class="fd-carousel__content">
1403
+ <div class="fd-message-page">
1404
+ <div class="fd-message-page__container">
1405
+ <div class="fd-message-page__icon-container">
1406
+ <i role="presentation" class="sap-icon--document fd-message-page__icon"></i>
1407
+
1408
+ <div role="status" aria-live="polite" class="fd-message-page__content">
1409
+ <div class="fd-message-page__title">
1410
+ Items could not be loaded
1411
+ </div>
1412
+ <div class="fd-message-page__subtitle fd-message-page__subtitle--center">
1413
+ Check your internet connection.
1414
+ And if that's not it, try reloading. If that still doesn't help, check with your administrator.
1415
+ </div>
1416
+ </div>
1417
+ </div>
1418
+ </div>
1419
+ </div>
1420
+ </section>
1421
+
1422
+ <div role="region" id="carousel-12" aria-live="polite">
1423
+ Error in loading items
1424
+ </div>
1425
+
1426
+ <h4>Images in Carousel
1427
+ </h4>
1428
+ <section
1429
+ class="fd-carousel"
1430
+ role="listbox"
1431
+ aria-roledescription="Carousel"
1432
+ aria-activedescendant="carousel-item-1"
1433
+ >
1434
+ <div class="fd-carousel__content">
1435
+ <div class="fd-carousel__slides">
1436
+ <div
1437
+ role="option"
1438
+ aria-setsize="1"
1439
+ aria-posinset="1"
1440
+ aria-selected="true"
1441
+ aria-hidden="false"
1442
+ id="carousel-item-1"
1443
+ class="fd-carousel__item fd-carousel__item--active">
1444
+ <div class="fd-message-page">
1445
+ <div class="fd-message-page__container">
1446
+ <div class="fd-message-page__icon-container">
1447
+ <i role="presentation" class="sap-icon--document fd-message-page__icon"></i>
1448
+ </div>
1449
+
1450
+ <div role="status" aria-live="polite" class="fd-message-page__content">
1451
+ <div class="fd-message-page__title">
1452
+ Unable to load data
1453
+ </div>
1454
+ <div class="fd-message-page__subtitle fd-message-page__subtitle--center">
1455
+ Check your internet connection.
1456
+ And if that's not it, try reloading. If that still doesn't help, check with your administrator.
1457
+ </div>
1458
+ </div>
1459
+ </div>
1460
+ </div>
1461
+ </div>
1462
+ </div>
1463
+ </div>
1464
+
1465
+ <div class="fd-carousel__page-indicator-container">
1466
+ <button
1467
+ role="button"
1468
+ class="fd-button fd-carousel__button fd-carousel__button--left"
1469
+ title="Previous Page"
1470
+ >
1471
+ <i class="sap-icon--slim-arrow-left" role="presentation" aria-hidden="true"></i>
1472
+ </button>
1473
+
1474
+ <div class="fd-carousel__page-indicators">
1475
+ <span role="img" aria-label="Item 1 of 7 displayed" class="fd-carousel__page-indicator"></span>
1476
+ <span role="img" aria-label="Item 2 of 7 displayed" class="fd-carousel__page-indicator"></span>
1477
+ <span role="img" aria-label="Item 3 of 7 displayed" class="fd-carousel__page-indicator"></span>
1478
+ <span role="img" aria-label="Item 4 of 7 displayed" class="fd-carousel__page-indicator"></span>
1479
+ <span role="img" aria-label="Item 5 of 7 displayed" class="fd-carousel__page-indicator fd-carousel__page-indicator--active"></span>
1480
+ <span role="img" aria-label="Item 6 of 7 displayed" class="fd-carousel__page-indicator"></span>
1481
+ <span role="img" aria-label="Item 7 of 7 displayed" class="fd-carousel__page-indicator"></span>
1482
+ </div>
1483
+
1484
+ <button
1485
+ role="button"
1486
+ class="fd-button fd-carousel__button fd-carousel__button--right"
1487
+ title="Next Page"
1488
+ >
1489
+ <i class="sap-icon--slim-arrow-right" role="presentation" aria-hidden="true"></i>
1490
+ </button>
1491
+ </div>
1492
+ </section>
1493
+ ```
1494
+
1495
+ ## Accessibility
1496
+
1497
+ - Use semantic HTML elements where appropriate
1498
+ - Include proper ARIA attributes for interactive elements
1499
+ - Ensure keyboard navigation support
1500
+ - Provide adequate color contrast
1501
+
1502
+ ## Source
1503
+
1504
+ This documentation was automatically generated from: `packages/styles/stories/Components/carousel/carousel.stories.js`
1505
+
1506
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).