1 module uim.bootstrap.bs5.demos.components.carousels; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/carousels", new class DH5AppPage { 7 this() { 8 super(); 9 this 10 .created(DateTime(2020, 12, 20, 10, 10, 0)) 11 .changed(timeLastModified(__FILE_FULL_PATH__)) 12 .parameters([ 13 "pageTitle": "Carousels - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 return 19 H5Main(["style":"margin-top:70px;"], 20 H5Div(["container-fluid", "mt-3", "bg-light"], 21 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 22 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Carousels")), 23 BS5Container(["mt-3"]).row( 24 H5Div(["col-12", "col-lg-2"], 25 listLevels("basic"), 26 listAreas("basic", "components"), 27 listSections("basic", "components", "carousels")), 28 H5Div(["col-12", "col-lg-8"], 29 dateInfo(this), 30 H5H2(["display-4"], "Carousels"), 31 H5Hr, 32 33 demoBs5Example("slidesonly", "Slides Only", 34 H5Div( 35 BS5Carousel("carouselSlidesOnly", ["slide"], ["data-bs-ride":"carousel"], 36 BS5CarouselInner( 37 BS5CarouselItem(["active"], 38 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])), 39 BS5CarouselItem( 40 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])), 41 BS5CarouselItem( 42 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 43 BS5CarouselItem( 44 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"])))) 45 ), 46 `BS5Carousel("carouselSlidesOnly", ["slide"], ["data-bs-ride":"carousel"], 47 BS5CarouselInner( 48 BS5CarouselItem(["active"], 49 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])), 50 BS5CarouselItem( 51 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])), 52 BS5CarouselItem( 53 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 54 BS5CarouselItem( 55 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]))))`, 56 `<div id="carouselSlidesOnly" ["carousel slide" data-bs-ride="carousel"] 57 H5Div(["carousel-inner"] 58 H5Div(["carousel-item active"] 59 H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"] 60 ) 61 H5Div(["carousel-item"] 62 H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"] 63 ) 64 H5Div(["carousel-item"] 65 H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"] 66 ) 67 H5Div(["carousel-item"] 68 H5Img(["src":"/img/libs/uim-bootstrap/slide4.jpg" "alt":"Fourth slide" ["d-block w-100"] 69 ) 70 ) 71 )`), 72 73 demoBs5Example("controls", "Controls", 74 H5Div( 75 BS5Carousel("carouselControls", ["slide"], ["data-bs-ride":"carousel"], 76 BS5CarouselInner( 77 BS5CarouselItem(["active"], 78 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])), 79 BS5CarouselItem( 80 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])), 81 BS5CarouselItem( 82 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 83 BS5CarouselItem( 84 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]))), 85 BS5CarouselControlPrev(["href":"#carouselControls", "role":"button", "data-bs-slide":"prev"], 86 H5Span(["carousel-control-prev-icon"], ["aria-hidden":"true"]), 87 H5Span(["visually-hidden"], "Previous")), 88 BS5CarouselControlNext(["href":"#carouselControls", "role":"button", "data-bs-slide":"next"], 89 H5Span(["carousel-control-next-icon"], ["aria-hidden":"true"]), 90 H5Span(["visually-hidden"], "Previous"))) 91 ), 92 `BS5Carousel("carouselControls", ["slide"], ["data-bs-ride":"carousel"], 93 BS5CarouselInner( 94 BS5CarouselItem(["active"], 95 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])), 96 BS5CarouselItem( 97 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])), 98 BS5CarouselItem( 99 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 100 BS5CarouselItem( 101 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]))), 102 BS5CarouselControlPrev(["href":"#carouselControls", "role":"button", "data-bs-slide":"prev"], 103 H5Span(["carousel-control-prev-icon"], ["aria-hidden":"true"]), 104 H5Span(["visually-hidden"], "Previous")), 105 BS5CarouselControlNext(["href":"#carouselControls", "role":"button", "data-bs-slide":"next"], 106 H5Span(["carousel-control-next-icon"], ["aria-hidden":"true"]), 107 H5Span(["visually-hidden"], "Previous")))`, 108 `<div id="carouselControls" ["carousel slide" data-bs-ride="carousel"] 109 H5Div(["carousel-inner"] 110 H5Div(["carousel-item active"] 111 H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"] 112 ) 113 H5Div(["carousel-item"] 114 H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"] 115 ) 116 H5Div(["carousel-item"] 117 H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"] 118 ) 119 H5Div(["carousel-item"] 120 H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"Fourth slide" ["d-block w-100"] 121 ) 122 ) 123 <a href="#carouselControls" ["carousel-control-prev" role="button" data-bs-slide="prev"] 124 H5Span(["carousel-control-prev-icon" aria-hidden="true"]") 125 H5Span(["visually-hidden"]Previous") 126 </a> 127 <a href="#carouselControls" ["carousel-control-next" role="button" data-bs-slide="next"] 128 H5Span(["carousel-control-next-icon" aria-hidden="true"]") 129 H5Span(["visually-hidden"]Next") 130 </a> 131 )`), 132 133 demoBs5Example("indicators", "Indicators", 134 H5Div( 135 BS5Carousel("carouselIndicators", ["slide"], ["data-bs-ride":"carousel"], 136 BS5CarouselIndicators( 137 BS5CarouselIndicator(["active"], ["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"0"]), 138 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"1"]), 139 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"2"]), 140 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"3"]) 141 ), 142 BS5CarouselInner( 143 BS5CarouselItem(["active"], 144 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])), 145 BS5CarouselItem( 146 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])), 147 BS5CarouselItem( 148 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 149 BS5CarouselItem( 150 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"])))) 151 ), 152 `BS5Carousel("carouselIndicators", ["slide"], ["data-bs-ride":"carousel"], 153 BS5CarouselIndicators( 154 BS5CarouselIndicator(["active"], ["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"0"]), 155 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"1"]), 156 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"2"]), 157 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"3"]) 158 ), 159 BS5CarouselInner( 160 BS5CarouselItem(["active"], 161 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])), 162 BS5CarouselItem( 163 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])), 164 BS5CarouselItem( 165 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 166 BS5CarouselItem( 167 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]))))`, 168 `<div id="carouselIndicators" ["carousel slide" data-bs-ride="carousel"] 169 H5Ol(["carousel-indicators"] 170 <li data-bs-target="#carouselIndicators" data-bs-slide-to="0" ["active"]") 171 <li data-bs-target="#carouselIndicators" data-bs-slide-to="1"]") 172 <li data-bs-target="#carouselIndicators" data-bs-slide-to="2"]") 173 <li data-bs-target="#carouselIndicators" data-bs-slide-to="3"]") 174 ) 175 H5Div(["carousel-inner"] 176 H5Div(["carousel-item active"] 177 H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"] 178 ) 179 H5Div(["carousel-item"] 180 H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"] 181 ) 182 H5Div(["carousel-item"] 183 H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"] 184 ) 185 H5Div(["carousel-item"] 186 H5Img(["src":"/img/1200x600-info.png" "alt":"Fourth slide" ["d-block w-100"] 187 ) 188 ) 189 )`), 190 191 demoBs5Example("captions", "Captions", 192 H5Div( 193 BS5Carousel("carouselCaptions", ["slide"], ["data-bs-ride":"carousel"], 194 BS5CarouselInner( 195 BS5CarouselItem(["active"], 196 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"]), 197 H5Div(["carousel-caption"], 198 H5H3("Caption"), 199 H5P("This text describes the first slide"))), 200 BS5CarouselItem( 201 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"]), 202 H5Div(["carousel-caption"], 203 H5H3("Caption"), 204 H5P("This text describes the second slide"))), 205 BS5CarouselItem( 206 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"]), 207 H5Div(["carousel-caption"], 208 H5H3("Caption"), 209 H5P("This text describes the third slide"))), 210 BS5CarouselItem( 211 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]), 212 H5Div(["carousel-caption"], 213 H5H3("Caption"), 214 H5P("This text describes the fourth slide"))))) 215 ), 216 `BS5Carousel("carouselCaptions", ["slide"], ["data-bs-ride":"carousel"], 217 BS5CarouselInner( 218 BS5CarouselItem(["active"], 219 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"]), 220 H5Div(["carousel-caption"], 221 H5H3("Caption"), 222 H5P("This text describes the first slide"))), 223 BS5CarouselItem( 224 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"]), 225 H5Div(["carousel-caption"], 226 H5H3("Caption"), 227 H5P("This text describes the second slide"))), 228 BS5CarouselItem( 229 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"]), 230 H5Div(["carousel-caption"], 231 H5H3("Caption"), 232 H5P("This text describes the third slide"))), 233 BS5CarouselItem( 234 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]), 235 H5Div(["carousel-caption"], 236 H5H3("Caption"), 237 H5P("This text describes the fourth slide")))))`, 238 `<div id="carouselCaptions" ["carousel slide" data-bs-ride="carousel"] 239 H5Div(["carousel-inner"] 240 H5Div(["carousel-item active"] 241 H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"] 242 H5Div(["carousel-caption"] 243 <h3>Caption", 244 <p>This text describes the first slide") 245 ) 246 ) 247 H5Div(["carousel-item"] 248 H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"] 249 H5Div(["carousel-caption"] 250 <h3>Caption", 251 <p>This text describes the second slide") 252 ) 253 ) 254 H5Div(["carousel-item"] 255 H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"] 256 H5Div(["carousel-caption"] 257 <h3>Caption", 258 <p>This text describes the third slide") 259 ) 260 ) 261 H5Div(["carousel-item"] 262 H5Img(["src":"/img/libs/uim-bootstrap/slide4.jpg" "alt":"Fourth slide" ["d-block w-100"] 263 H5Div(["carousel-caption"] 264 <h3>Caption", 265 <p>This text describes the fourth slide") 266 ) 267 ) 268 ) 269 )`), 270 271 demoBs5Example("every", "Everything<p>Carousel with controls, indicators and captions</p>", 272 H5Div( 273 BS5Carousel("carouselCaptions", ["slide"], ["data-bs-ride":"carousel"], 274 BS5CarouselIndicators( 275 BS5CarouselIndicator(["active"], ["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"0"]), 276 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"1"]), 277 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"2"]), 278 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"3"])), 279 BS5CarouselInner( 280 BS5CarouselItem(["active"], 281 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"]), 282 H5Div(["carousel-caption"], 283 H5H3("Caption"), 284 H5P("This text describes the first slide"))), 285 BS5CarouselItem( 286 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"]), 287 H5Div(["carousel-caption"], 288 H5H3("Caption"), 289 H5P("This text describes the second slide"))), 290 BS5CarouselItem( 291 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"]), 292 H5Div(["carousel-caption"], 293 H5H3("Caption"), 294 H5P("This text describes the third slide"))), 295 BS5CarouselItem( 296 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]), 297 H5Div(["carousel-caption"], 298 H5H3("Caption"), 299 H5P("This text describes the fourth slide")))), 300 BS5CarouselControlPrev(["href":"#carouselControls", "role":"button", "data-bs-slide":"prev"], 301 H5Span(["carousel-control-prev-icon"], ["aria-hidden":"true"]), 302 H5Span(["visually-hidden"], "Previous")), 303 BS5CarouselControlNext(["href":"#carouselControls", "role":"button", "data-bs-slide":"next"], 304 H5Span(["carousel-control-next-icon"], ["aria-hidden":"true"]), 305 H5Span(["visually-hidden"], "Previous"))) 306 ), 307 `BS5Carousel("carouselCaptions", ["slide"], ["data-bs-ride":"carousel"], 308 BS5CarouselIndicators( 309 BS5CarouselIndicator(["active"], ["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"0"]), 310 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"1"]), 311 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"2"]), 312 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"3"])), 313 BS5CarouselInner( 314 BS5CarouselItem(["active"], 315 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"]), 316 H5Div(["carousel-caption"], 317 H5H3("Caption"), 318 H5P("This text describes the first slide"))), 319 BS5CarouselItem( 320 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"]), 321 H5Div(["carousel-caption"], 322 H5H3("Caption"), 323 H5P("This text describes the second slide"))), 324 BS5CarouselItem( 325 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"]), 326 H5Div(["carousel-caption"], 327 H5H3("Caption"), 328 H5P("This text describes the third slide"))), 329 BS5CarouselItem( 330 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]), 331 H5Div(["carousel-caption"], 332 H5H3("Caption"), 333 H5P("This text describes the fourth slide")))), 334 BS5CarouselControlPrev(["href":"#carouselControls", "role":"button", "data-bs-slide":"prev"], 335 H5Span(["carousel-control-prev-icon"], ["aria-hidden":"true"]), 336 H5Span(["visually-hidden"], "Previous")), 337 BS5CarouselControlNext(["href":"#carouselControls", "role":"button", "data-bs-slide":"next"], 338 H5Span(["carousel-control-next-icon"], ["aria-hidden":"true"]), 339 H5Span(["visually-hidden"], "Previous")))`, 340 `<div id="carouselAll" ["carousel slide" data-bs-ride="carousel"] 341 H5Ol(["carousel-indicators"] 342 <li data-bs-target="#carouselAll" data-bs-slide-to="0" ["active"]") 343 <li data-bs-target="#carouselAll" data-bs-slide-to="1"]") 344 <li data-bs-target="#carouselAll" data-bs-slide-to="2"]") 345 <li data-bs-target="#carouselAll" data-bs-slide-to="3"]") 346 ) 347 H5Div(["carousel-inner"] 348 H5Div(["carousel-item active"] 349 H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"] 350 H5Div(["carousel-caption"] 351 <h3>Caption", 352 <p>This text describes the first slide") 353 ) 354 ) 355 H5Div(["carousel-item"] 356 H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"] 357 H5Div(["carousel-caption"] 358 <h3>Caption", 359 <p>This text describes the second slide") 360 ) 361 ) 362 H5Div(["carousel-item"] 363 H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"] 364 H5Div(["carousel-caption"] 365 <h3>Caption", 366 <p>This text describes the third slide") 367 ) 368 ) 369 H5Div(["carousel-item"] 370 H5Img(["src":"/img/libs/uim-bootstrap/slide4.jpg" "alt":"Fourth slide" ["d-block w-100"] 371 H5Div(["carousel-caption"] 372 <h3>Caption", 373 <p>This text describes the fourth slide") 374 ) 375 ) 376 ) 377 <a href="#carouselAll" ["carousel-control-prev" role="button" data-bs-slide="prev"] 378 H5Span(["carousel-control-prev-icon" aria-hidden="true"]") 379 H5Span(["visually-hidden"]Previous") 380 </a> 381 <a href="#carouselAll" ["carousel-control-next" role="button" data-bs-slide="next"] 382 H5Span(["carousel-control-next-icon" aria-hidden="true"]") 383 H5Span(["visually-hidden"]Next") 384 </a> 385 )`), 386 387 demoBs5Example("dark", "Dark<p>Carousel with dark controls, indicators and captions</p>", 388 H5Div( 389 BS5Carousel("carouselDark", ["slide"], ["data-bs-ride":"carousel"], 390 BS5CarouselIndicators( 391 BS5CarouselIndicator(["active"], ["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"0"]), 392 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"1"]), 393 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"2"]), 394 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"3"])), 395 BS5CarouselInner( 396 BS5CarouselItem(["active"], 397 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"]), 398 H5Div(["carousel-caption"], 399 H5H3("Caption"), 400 H5P("This text describes the first slide"))), 401 BS5CarouselItem( 402 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"]), 403 H5Div(["carousel-caption"], 404 H5H3("Caption"), 405 H5P("This text describes the second slide"))), 406 BS5CarouselItem( 407 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"]), 408 H5Div(["carousel-caption"], 409 H5H3("Caption"), 410 H5P("This text describes the third slide"))), 411 BS5CarouselItem( 412 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]), 413 H5Div(["carousel-caption"], 414 H5H3("Caption"), 415 H5P("This text describes the fourth slide")))), 416 BS5CarouselControlPrev(["href":"#carouselControls", "role":"button", "data-bs-slide":"prev"], 417 H5Span(["carousel-control-prev-icon"], ["aria-hidden":"true"]), 418 H5Span(["visually-hidden"], "Previous")), 419 BS5CarouselControlNext(["href":"#carouselControls", "role":"button", "data-bs-slide":"next"], 420 H5Span(["carousel-control-next-icon"], ["aria-hidden":"true"]), 421 H5Span(["visually-hidden"], "Previous"))) 422 ), 423 `BS5Carousel("carouselDark", ["slide"], ["data-bs-ride":"carousel"], 424 BS5CarouselIndicators( 425 BS5CarouselIndicator(["active"], ["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"0"]), 426 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"1"]), 427 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"2"]), 428 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"3"])), 429 BS5CarouselInner( 430 BS5CarouselItem(["active"], 431 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"]), 432 H5Div(["carousel-caption"], 433 H5H3("Caption"), 434 H5P("This text describes the first slide"))), 435 BS5CarouselItem( 436 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"]), 437 H5Div(["carousel-caption"], 438 H5H3("Caption"), 439 H5P("This text describes the second slide"))), 440 BS5CarouselItem( 441 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"]), 442 H5Div(["carousel-caption"], 443 H5H3("Caption"), 444 H5P("This text describes the third slide"))), 445 BS5CarouselItem( 446 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]), 447 H5Div(["carousel-caption"], 448 H5H3("Caption"), 449 H5P("This text describes the fourth slide")))), 450 BS5CarouselControlPrev(["href":"#carouselControls", "role":"button", "data-bs-slide":"prev"], 451 H5Span(["carousel-control-prev-icon"], ["aria-hidden":"true"]), 452 H5Span(["visually-hidden"], "Previous")), 453 BS5CarouselControlNext(["href":"#carouselControls", "role":"button", "data-bs-slide":"next"], 454 H5Span(["carousel-control-next-icon"], ["aria-hidden":"true"]), 455 H5Span(["visually-hidden"], "Previous")))`, 456 `<div id="carouselDark" ["carousel slide carousel-dark" data-bs-ride="carousel"] 457 H5Ol(["carousel-indicators"] 458 <li data-bs-target="#carouselDark" data-bs-slide-to="0" ["active"]") 459 <li data-bs-target="#carouselDark" data-bs-slide-to="1"]") 460 <li data-bs-target="#carouselDark" data-bs-slide-to="2"]") 461 <li data-bs-target="#carouselDark" data-bs-slide-to="3"]") 462 ) 463 H5Div(["carousel-inner"] 464 H5Div(["carousel-item active"] 465 H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"] 466 H5Div(["carousel-caption"] 467 <h3>Caption", 468 <p>This text describes the first slide") 469 ) 470 ) 471 H5Div(["carousel-item"] 472 H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"] 473 H5Div(["carousel-caption"] 474 <h3>Caption", 475 <p>This text describes the second slide") 476 ) 477 ) 478 H5Div(["carousel-item"] 479 H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"] 480 H5Div(["carousel-caption"] 481 <h3>Caption", 482 <p>This text describes the third slide") 483 ) 484 ) 485 H5Div(["carousel-item"] 486 H5Img(["src":"/img/libs/uim-bootstrap/slide4.jpg" "alt":"Fourth slide" ["d-block w-100"] 487 H5Div(["carousel-caption"] 488 <h3>Caption", 489 <p>This text describes the fourth slide") 490 ) 491 ) 492 ) 493 <a href="#carouselDark" ["carousel-control-prev" role="button" data-bs-slide="prev"] 494 H5Span(["carousel-control-prev-icon" aria-hidden="true"]") 495 H5Span(["visually-hidden"]Previous") 496 </a> 497 <a href="#carouselDark" ["carousel-control-next" role="button" data-bs-slide="next"] 498 H5Span(["carousel-control-next-icon" aria-hidden="true"]") 499 H5Span(["visually-hidden"]Next") 500 </a> 501 )`), 502 503 demoBs5Example("fade", "Crossfade", 504 H5Div( 505 BS5Carousel("carouselFade", ["slide"], ["data-bs-ride":"carousel"], 506 BS5CarouselInner( 507 BS5CarouselItem(["active"], 508 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])), 509 BS5CarouselItem( 510 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])), 511 BS5CarouselItem( 512 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 513 BS5CarouselItem( 514 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"])))) 515 ), 516 `BS5Carousel("carouselFade", ["slide"], ["data-bs-ride":"carousel"], 517 BS5CarouselInner( 518 BS5CarouselItem(["active"], 519 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])), 520 BS5CarouselItem( 521 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])), 522 BS5CarouselItem( 523 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 524 BS5CarouselItem( 525 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]))))`, 526 `<div id="carouselFade" ["carousel slide carousel-fade" data-bs-ride="carousel"] 527 H5Div(["carousel-inner"] 528 H5Div(["carousel-item active"] 529 H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"] 530 ) 531 H5Div(["carousel-item"] 532 H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"] 533 ) 534 H5Div(["carousel-item"] 535 H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"] 536 ) 537 H5Div(["carousel-item"] 538 H5Img(["src":"/img/libs/uim-bootstrap/slide4.jpg" "alt":"Fourth slide" ["d-block w-100"] 539 ) 540 ) 541 )`), 542 543 demoBs5Example("options", "Options<p>Carousel with options defined with data attributes</p>", 544 H5Div( 545 BS5Carousel("carouselOptions", ["slide"], ["data-bs-ride":"carousel", "data-bs-pause":"false", "data-bs-wrap":"false", "data-bs-interval":"2000", "data-bs-keyboard":"false"], 546 BS5CarouselIndicators( 547 BS5CarouselIndicator(["active"], ["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"0"]), 548 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"1"]), 549 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"2"]), 550 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"3"])), 551 BS5CarouselInner( 552 BS5CarouselItem(["active"], 553 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])), 554 BS5CarouselItem( 555 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])), 556 BS5CarouselItem( 557 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 558 BS5CarouselItem( 559 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]))), 560 BS5CarouselControlPrev(["href":"#carouselControls", "role":"button", "data-bs-slide":"prev"], 561 H5Span(["carousel-control-prev-icon"], ["aria-hidden":"true"]), 562 H5Span(["visually-hidden"], "Previous")), 563 BS5CarouselControlNext(["href":"#carouselControls", "role":"button", "data-bs-slide":"next"], 564 H5Span(["carousel-control-next-icon"], ["aria-hidden":"true"]), 565 H5Span(["visually-hidden"], "Previous"))) 566 ), 567 `BS5Carousel("carouselOptions", ["slide"], ["data-bs-ride":"carousel", "data-bs-pause":"false", "data-bs-wrap":"false", "data-bs-interval":"2000", "data-bs-keyboard":"false"], 568 BS5CarouselIndicators( 569 BS5CarouselIndicator(["active"], ["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"0"]), 570 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"1"]), 571 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"2"]), 572 BS5CarouselIndicator(["data-bs-target":"#carouselIndicators", "data-bs-slide-to":"3"])), 573 BS5CarouselInner( 574 BS5CarouselItem(["active"], 575 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide1.jpg", "alt":"First slide"])), 576 BS5CarouselItem( 577 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide2.jpg", "alt":"Second slide"])), 578 BS5CarouselItem( 579 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide3.jpg", "alt":"Third slide"])), 580 BS5CarouselItem( 581 H5Image(["d-block", "w-100"], ["src":"/img/libs/uim-bootstrap/slide4.jpg", "alt":"Fourth slide"]))), 582 BS5CarouselControlPrev(["href":"#carouselControls", "role":"button", "data-bs-slide":"prev"], 583 H5Span(["carousel-control-prev-icon"], ["aria-hidden":"true"]), 584 H5Span(["visually-hidden"], "Previous")), 585 BS5CarouselControlNext(["href":"#carouselControls", "role":"button", "data-bs-slide":"next"], 586 H5Span(["carousel-control-next-icon"], ["aria-hidden":"true"]), 587 H5Span(["visually-hidden"], "Previous")))`, 588 `<div id="carouselOptions" ["carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false" data-bs-interval="2000" data-bs-keyboard="false"] 589 H5Ol(["carousel-indicators"] 590 <li data-bs-target="#carouselOptions" data-bs-slide-to="0" ["active"]") 591 <li data-bs-target="#carouselOptions" data-bs-slide-to="1"]") 592 <li data-bs-target="#carouselOptions" data-bs-slide-to="2"]") 593 <li data-bs-target="#carouselOptions" data-bs-slide-to="3"]") 594 ) 595 H5Div(["carousel-inner"] 596 H5Div(["carousel-item active"] 597 H5Img(["src":"/img/libs/uim-bootstrap/slide1.jpg" "alt":"First slide" ["d-block w-100"] 598 ) 599 H5Div(["carousel-item"] 600 H5Img(["src":"/img/libs/uim-bootstrap/slide2.jpg" "alt":"Second slide" ["d-block w-100"] 601 ) 602 H5Div(["carousel-item" data-bs-interval="1000"] 603 H5Img(["src":"/img/libs/uim-bootstrap/slide3.jpg" "alt":"Third slide" ["d-block w-100"] 604 ) 605 H5Div(["carousel-item"] 606 H5Img(["src":"/img/libs/uim-bootstrap/slide4.jpg" "alt":"Fourth slide" ["d-block w-100"] 607 ) 608 ) 609 <a href="#carouselOptions" ["carousel-control-prev" role="button" data-bs-slide="prev"] 610 H5Span(["carousel-control-prev-icon" aria-hidden="true"]") 611 H5Span(["visually-hidden"]Previous") 612 </a> 613 <a href="#carouselOptions" ["carousel-control-next" role="button" data-bs-slide="next"] 614 H5Span(["carousel-control-next-icon" aria-hidden="true"]") 615 H5Span(["visually-hidden"]Next") 616 </a> 617 )`) 618 619 ), 620 H5Div(["col-12", "col-lg-2"]))).toString; 621 } 622 }); 623 }