1 module uim.bootstrap.bs5.demos.examples.carousel; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("examples/carousel", 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": "Album Page - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 19 return 20 ` 21 22 <style> 23 /* GLOBAL STYLES 24 -------------------------------------------------- */ 25 /* Padding below the footer and lighter body text */ 26 27 body { 28 padding-top: 3rem; 29 padding-bottom: 3rem; 30 color: #5a5a5a; 31 } 32 33 34 /* CUSTOMIZE THE CAROUSEL 35 -------------------------------------------------- */ 36 37 /* Carousel base class */ 38 .carousel { 39 margin-bottom: 4rem; 40 } 41 /* Since positioning the image, we need to help out the caption */ 42 .carousel-caption { 43 bottom: 3rem; 44 z-index: 10; 45 } 46 47 /* Declare heights because of positioning of img element */ 48 .carousel-item { 49 height: 32rem; 50 } 51 .carousel-item > img { 52 position: absolute; 53 top: 0; 54 left: 0; 55 min-width: 100%; 56 height: 32rem; 57 } 58 59 60 /* MARKETING CONTENT 61 -------------------------------------------------- */ 62 63 /* Center align the text within the three columns below the carousel */ 64 .marketing .col-lg-4 { 65 margin-bottom: 1.5rem; 66 text-align: center; 67 } 68 .marketing h2 { 69 font-weight: 400; 70 } 71 /* rtl:begin:ignore */ 72 .marketing .col-lg-4 p { 73 margin-right: .75rem; 74 margin-left: .75rem; 75 } 76 /* rtl:end:ignore */ 77 78 79 /* Featurettes 80 ------------------------- */ 81 82 .featurette-divider { 83 margin: 5rem 0; /* Space out the Bootstrap H5Hr, more */ 84 } 85 86 /* Thin out the marketing headings */ 87 .featurette-heading { 88 font-weight: 300; 89 line-height: 1; 90 /* rtl:remove */ 91 letter-spacing: -.05rem; 92 } 93 94 95 /* RESPONSIVE CSS 96 -------------------------------------------------- */ 97 98 @media (min-width: 40em) { 99 /* Bump up size of carousel content */ 100 .carousel-caption p { 101 margin-bottom: 1.25rem; 102 font-size: 1.25rem; 103 line-height: 1.4; 104 } 105 106 .featurette-heading { 107 font-size: 50px; 108 } 109 } 110 111 @media (min-width: 62em) { 112 .featurette-heading { 113 margin-top: 7rem; 114 } 115 } 116 117 .bd-placeholder-img { 118 font-size: 1.125rem; 119 text-anchor: middle; 120 -webkit-user-select: none; 121 -moz-user-select: none; 122 user-select: none; 123 } 124 125 @media (min-width: 768px) { 126 .bd-placeholder-img-lg { 127 font-size: 3.5rem; 128 } 129 } 130 </style> 131 132 133 <!-- Custom styles for this template --> 134 <link href="carousel.css" rel="stylesheet"> 135 136 137 <header> 138 H5Nav(["navbar navbar-expand-md navbar-dark fixed-top bg-dark"> 139 H5Div(["container-fluid"> 140 H5A(["navbar-brand"], ["href":"#"], Carousel"), 141 H5Button(["navbar-toggler" "type":"button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false", "aria-label":"Toggle navigation"> 142 H5Span(["navbar-toggler-icon"]) 143 ) 144 H5Div(["collapse navbar-collapse" id="navbarCollapse"> 145 BS5NavbarNav(["me-auto mb-2 mb-md-0"> 146 BS5NavItem(["active"], 147 BS5NavLink( aria-current="page"], ["href":"#"], Home"), 148 ), 149 BS5NavItem( 150 BS5NavLink( "href":"#"], Link"), 151 ), 152 BS5NavItem( 153 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"), 154 ), 155 ), 156 H5Form(["d-flex"> 157 <input class="form-control me-2" "type":"search" "placeholder":"Search", "aria-label":"Search"> 158 BS5ButtonSubmit(["btn-outline-success"], "Search") 159 ) 160 ), 161 ), 162 ), 163 </header> 164 165 <main> 166 167 <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> 168 <ol class="carousel-indicators"> 169 <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active">), 170 <li data-bs-target="#myCarousel" data-bs-slide-to="1">), 171 <li data-bs-target="#myCarousel" data-bs-slide-to="2">), 172 ), 173 H5Div(["carousel-inner"> 174 H5Div(["carousel-item active"> 175 H5Svg(["bd-placeholder-img" "width":"100%" "height":"100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect "width":"100%" "height":"100%" fill="#777"/></svg> 176 177 H5Div(["container"> 178 H5Div(["carousel-caption text-start"> 179 H5H1("Example headline."), 180 H5P("Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.") 181 H5P("H5A(["btn btn-lg btn-primary"], ["href":"#" "role":"button">Sign up today"),") 182 ), 183 ), 184 ), 185 H5Div(["carousel-item"> 186 H5Svg(["bd-placeholder-img" "width":"100%" "height":"100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect "width":"100%" "height":"100%" fill="#777"/></svg> 187 188 H5Div(["container"> 189 H5Div(["carousel-caption"> 190 H5H1("Another example headline."), 191 H5P("Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.") 192 H5P("H5A(["btn btn-lg btn-primary"], ["href":"#" "role":"button">Learn more"),") 193 ), 194 ), 195 ), 196 H5Div(["carousel-item"> 197 H5Svg(["bd-placeholder-img" "width":"100%" "height":"100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect "width":"100%" "height":"100%" fill="#777"/></svg> 198 199 H5Div(["container"> 200 H5Div(["carousel-caption text-end"> 201 H5H1("One more for good measure."), 202 H5P("Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.") 203 H5P("H5A(["btn btn-lg btn-primary"], ["href":"#" "role":"button">Browse gallery"),") 204 ), 205 ), 206 ), 207 ), 208 H5A(["carousel-control-prev" href="#myCarousel" "role":"button" data-bs-slide="prev"> 209 <span class="carousel-control-prev-icon" aria-hidden="true">"), 210 <span class="visually-hidden">Previous"), 211 "), 212 H5A(["carousel-control-next" href="#myCarousel" "role":"button" data-bs-slide="next"> 213 <span class="carousel-control-next-icon" aria-hidden="true">"), 214 <span class="visually-hidden">Next"), 215 "), 216 ), 217 218 219 <!-- Marketing messaging and featurettes 220 ================================================== --> 221 <!-- Wrap the rest of the page in another container to center all the content. --> 222 223 H5Div(["container marketing"> 224 225 <!-- Three columns of text below the carousel --> 226 H5Div(["row"> 227 H5Div(["col-lg-4"> 228 H5Svg(["bd-placeholder-img rounded-circle" "width":"140" "height":"140" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg> 229 230 H5H2("Heading") 231 H5P("Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.") 232 H5P("H5A(["btn btn-secondary"], ["href":"#" "role":"button">View details »"),") 233 ),<!-- /.col-lg-4 --> 234 H5Div(["col-lg-4"> 235 H5Svg(["bd-placeholder-img rounded-circle" "width":"140" "height":"140" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg> 236 237 H5H2("Heading") 238 H5P("Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.") 239 H5P("H5A(["btn btn-secondary"], ["href":"#" "role":"button">View details »"),") 240 ),<!-- /.col-lg-4 --> 241 H5Div(["col-lg-4"> 242 H5Svg(["bd-placeholder-img rounded-circle" "width":"140" "height":"140" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg> 243 244 H5H2("Heading") 245 H5P("Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.") 246 H5P("H5A(["btn btn-secondary"], ["href":"#" "role":"button">View details »"),") 247 ),<!-- /.col-lg-4 --> 248 ),<!-- /.row --> 249 250 251 <!-- START THE FEATURETTES --> 252 253 <hr class="featurette-divider"> 254 255 H5Div(["row featurette"> 256 H5Div(["col-md-7"> 257 H5H2(["featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind."),") 258 H5P(["lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.") 259 ), 260 H5Div(["col-md-5"> 261 H5Svg(["bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" "width":"500" "height":"500" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> 262 263 ), 264 ), 265 266 <hr class="featurette-divider"> 267 268 H5Div(["row featurette"> 269 H5Div(["col-md-7 order-md-2"> 270 H5H2(["featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself."),") 271 H5P(["lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.") 272 ), 273 H5Div(["col-md-5 order-md-1"> 274 H5Svg(["bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" "width":"500" "height":"500" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> 275 276 ), 277 ), 278 279 <hr class="featurette-divider"> 280 281 H5Div(["row featurette"> 282 H5Div(["col-md-7"> 283 H5H2(["featurette-heading">And lastly, this one. <span class="text-muted">Checkmate."),") 284 H5P(["lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.") 285 ), 286 H5Div(["col-md-5"> 287 H5Svg(["bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" "width":"500" "height":"500" xmlns="http://www.w3.org/2000/svg" "role":"img", "aria-label":"Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> 288 289 ), 290 ), 291 292 <hr class="featurette-divider"> 293 294 <!-- /END THE FEATURETTES --> 295 296 ),<!-- /.container --> 297 298 299 <!-- FOOTER --> 300 H5Footer(["container"> 301 H5P(["float-end">H5A(["href":"#"], Back to top"),") 302 H5P("© 2017-2020 Company, Inc. · H5A(["href":"#"], Privacy"), · H5A(["href":"#"], Terms"),") 303 ) 304 ) 305 306 `; 307 308 } 309 }); 310 } 311