carousel.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
  1. <!doctype html>
  2. <!--
  3. * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
  4. * @version 1.0.0-alpha.18
  5. * @link https://tabler.io
  6. * Copyright 2018-2020 The Tabler Authors
  7. * Copyright 2018-2020 codecalm.net Paweł Kuna
  8. * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
  9. -->
  10. <html lang="en">
  11. <head>
  12. <meta charset="utf-8"/>
  13. <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
  14. <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  15. <title>Carousel - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
  16. <!-- CSS files -->
  17. <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
  18. <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
  19. <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
  20. <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
  21. <link href="./dist/css/demo.min.css" rel="stylesheet"/>
  22. </head>
  23. <body class="antialiased">
  24. <div class="page">
  25. <header class="navbar navbar-expand-md navbar-light d-print-none">
  26. <div class="container-xl">
  27. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
  28. <span class="navbar-toggler-icon"></span>
  29. </button>
  30. <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
  31. <a href=".">
  32. <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
  33. </a>
  34. </h1>
  35. <div class="navbar-nav flex-row order-md-last">
  36. <div class="nav-item dropdown d-none d-md-flex me-3">
  37. <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
  38. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
  39. <span class="badge bg-red"></span>
  40. </a>
  41. <div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
  42. <div class="card">
  43. <div class="card-body">
  44. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="nav-item dropdown">
  50. <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
  51. <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
  52. <div class="d-none d-xl-block ps-2">
  53. <div>Paweł Kuna</div>
  54. <div class="mt-1 small text-muted">UI Designer</div>
  55. </div>
  56. </a>
  57. <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
  58. <a href="#" class="dropdown-item">Set status</a>
  59. <a href="#" class="dropdown-item">Profile & account</a>
  60. <a href="#" class="dropdown-item">Feedback</a>
  61. <div class="dropdown-divider"></div>
  62. <a href="#" class="dropdown-item">Settings</a>
  63. <a href="#" class="dropdown-item">Logout</a>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. </header>
  69. <div class="navbar-expand-md">
  70. <div class="collapse navbar-collapse" id="navbar-menu">
  71. <div class="navbar navbar-light">
  72. <div class="container-xl">
  73. <ul class="navbar-nav">
  74. <li class="nav-item">
  75. <a class="nav-link" href="./index.html" >
  76. <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
  77. </span>
  78. <span class="nav-link-title">
  79. Home
  80. </span>
  81. </a>
  82. </li>
  83. <li class="nav-item active dropdown">
  84. <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
  85. <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
  86. </span>
  87. <span class="nav-link-title">
  88. Interface
  89. </span>
  90. </a>
  91. <div class="dropdown-menu">
  92. <div class="dropdown-menu-columns">
  93. <div class="dropdown-menu-column">
  94. <a class="dropdown-item" href="./empty.html" >
  95. Empty page
  96. </a>
  97. <a class="dropdown-item" href="./blank.html" >
  98. Blank page
  99. </a>
  100. <a class="dropdown-item" href="./buttons.html" >
  101. Buttons
  102. </a>
  103. <a class="dropdown-item" href="./cards.html" >
  104. Cards
  105. </a>
  106. <a class="dropdown-item" href="./cards-masonry.html" >
  107. Cards Masonry
  108. </a>
  109. <a class="dropdown-item" href="./colors.html" >
  110. Colors
  111. </a>
  112. <a class="dropdown-item" href="./dropdowns.html" >
  113. Dropdowns
  114. </a>
  115. <a class="dropdown-item" href="./icons.html" >
  116. Icons
  117. </a>
  118. <a class="dropdown-item" href="./modals.html" >
  119. Modals
  120. </a>
  121. <a class="dropdown-item" href="./maps.html" >
  122. Maps
  123. </a>
  124. <a class="dropdown-item" href="./map-fullsize.html" >
  125. Map fullsize
  126. </a>
  127. <a class="dropdown-item" href="./maps-vector.html" >
  128. Vector maps
  129. </a>
  130. <a class="dropdown-item" href="./navigation.html" >
  131. Navigation
  132. </a>
  133. </div>
  134. <div class="dropdown-menu-column">
  135. <a class="dropdown-item" href="./charts.html" >
  136. Charts
  137. </a>
  138. <a class="dropdown-item" href="./charts-heatmap.html" >
  139. Charts heatmap
  140. </a>
  141. <a class="dropdown-item" href="./pagination.html" >
  142. Pagination
  143. </a>
  144. <a class="dropdown-item" href="./skeleton.html" >
  145. Skeleton
  146. </a>
  147. <a class="dropdown-item" href="./tabs.html" >
  148. Tabs
  149. </a>
  150. <a class="dropdown-item" href="./tables.html" >
  151. Tables
  152. </a>
  153. <a class="dropdown-item active" href="./carousel.html" >
  154. Carousel
  155. </a>
  156. <a class="dropdown-item" href="./lists.html" >
  157. Lists
  158. </a>
  159. <a class="dropdown-item" href="./typography.html" >
  160. Typography
  161. </a>
  162. <a class="dropdown-item" href="./markdown.html" >
  163. Markdown
  164. </a>
  165. <div class="dropend">
  166. <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
  167. Authentication
  168. </a>
  169. <div class="dropdown-menu">
  170. <a href="./sign-in.html" class="dropdown-item">Sign in</a>
  171. <a href="./sign-up.html" class="dropdown-item">Sign up</a>
  172. <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
  173. <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
  174. <a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
  175. </div>
  176. </div>
  177. <div class="dropend">
  178. <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
  179. Error pages
  180. </a>
  181. <div class="dropdown-menu">
  182. <a href="./error-404.html" class="dropdown-item">404 page</a>
  183. <a href="./error-500.html" class="dropdown-item">500 page</a>
  184. <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. </li>
  191. <li class="nav-item">
  192. <a class="nav-link" href="./form-elements.html" >
  193. <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
  194. </span>
  195. <span class="nav-link-title">
  196. Form elements
  197. </span>
  198. </a>
  199. </li>
  200. <li class="nav-item dropdown">
  201. <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
  202. <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  203. </span>
  204. <span class="nav-link-title">
  205. Extra
  206. </span>
  207. </a>
  208. <div class="dropdown-menu">
  209. <a class="dropdown-item" href="./activity.html" >
  210. Activity
  211. </a>
  212. <a class="dropdown-item" href="./gallery.html" >
  213. Gallery
  214. </a>
  215. <a class="dropdown-item" href="./invoice.html" >
  216. Invoice
  217. </a>
  218. <a class="dropdown-item" href="./search-results.html" >
  219. Search results
  220. </a>
  221. <a class="dropdown-item" href="./pricing.html" >
  222. Pricing cards
  223. </a>
  224. <a class="dropdown-item" href="./users.html" >
  225. Users
  226. </a>
  227. <a class="dropdown-item" href="./license.html" >
  228. License
  229. </a>
  230. <a class="dropdown-item" href="./music.html" >
  231. Music
  232. </a>
  233. <a class="dropdown-item" href="./widgets.html" >
  234. Widgets
  235. </a>
  236. <a class="dropdown-item" href="./wizard.html" >
  237. Wizard
  238. </a>
  239. </div>
  240. </li>
  241. <li class="nav-item dropdown">
  242. <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
  243. <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
  244. </span>
  245. <span class="nav-link-title">
  246. Layout
  247. </span>
  248. </a>
  249. <div class="dropdown-menu">
  250. <div class="dropdown-menu-columns">
  251. <div class="dropdown-menu-column">
  252. <a class="dropdown-item" href="./layout-horizontal.html" >
  253. Horizontal
  254. </a>
  255. <a class="dropdown-item" href="./layout-vertical.html" >
  256. Vertical
  257. </a>
  258. <a class="dropdown-item" href="./layout-vertical-transparent.html" >
  259. Vertical transparent
  260. </a>
  261. <a class="dropdown-item" href="./layout-vertical-right.html" >
  262. Right vertical
  263. </a>
  264. <a class="dropdown-item" href="./layout-condensed.html" >
  265. Condensed
  266. </a>
  267. <a class="dropdown-item" href="./layout-condensed-dark.html" >
  268. Condensed dark
  269. </a>
  270. <a class="dropdown-item" href="./layout-combo.html" >
  271. Combined
  272. </a>
  273. </div>
  274. <div class="dropdown-menu-column">
  275. <a class="dropdown-item" href="./layout-navbar-dark.html" >
  276. Navbar dark
  277. </a>
  278. <a class="dropdown-item" href="./layout-navbar-sticky.html" >
  279. Navbar sticky
  280. </a>
  281. <a class="dropdown-item" href="./layout-navbar-overlap.html" >
  282. Navbar overlap
  283. </a>
  284. <a class="dropdown-item" href="./layout-dark.html" >
  285. Dark mode
  286. </a>
  287. <a class="dropdown-item" href="./layout-rtl.html" >
  288. RTL mode
  289. </a>
  290. <a class="dropdown-item" href="./layout-fluid.html" >
  291. Fluid
  292. </a>
  293. <a class="dropdown-item" href="./layout-fluid-vertical.html" >
  294. Fluid vertical
  295. </a>
  296. </div>
  297. </div>
  298. </div>
  299. </li>
  300. <li class="nav-item">
  301. <a class="nav-link" href="./docs/index.html" >
  302. <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
  303. </span>
  304. <span class="nav-link-title">
  305. Documentation
  306. </span>
  307. </a>
  308. </li>
  309. </ul>
  310. <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
  311. <form action="." method="get">
  312. <div class="input-icon">
  313. <span class="input-icon-addon">
  314. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
  315. </span>
  316. <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
  317. </div>
  318. </form>
  319. </div>
  320. </div>
  321. </div>
  322. </div>
  323. </div>
  324. <div class="content">
  325. <div class="container-xl">
  326. <!-- Page title -->
  327. <div class="page-header d-print-none">
  328. <div class="row align-items-center">
  329. <div class="col">
  330. <h2 class="page-title">
  331. Carousel
  332. </h2>
  333. </div>
  334. </div>
  335. </div>
  336. <div class="row">
  337. <div class="col-md-6">
  338. <div class="card">
  339. <div class="card-header">
  340. <h3 class="card-title">Carousel</h3>
  341. </div>
  342. <div class="card-body">
  343. <div id="carousel-default" class="carousel slide" data-bs-ride="carousel">
  344. <div class="carousel-inner">
  345. <div class="carousel-item active">
  346. <img class="d-block w-100" alt="" src="./static/photos/1b73704b282a8ec6.jpg">
  347. </div>
  348. <div class="carousel-item">
  349. <img class="d-block w-100" alt="" src="./static/photos/3d2998219313cd37.jpg">
  350. </div>
  351. <div class="carousel-item">
  352. <img class="d-block w-100" alt="" src="./static/photos/6ab3200b14549f8a.jpg">
  353. </div>
  354. <div class="carousel-item">
  355. <img class="d-block w-100" alt="" src="./static/photos/6d35d9a2bd6c63c2.jpg">
  356. </div>
  357. <div class="carousel-item">
  358. <img class="d-block w-100" alt="" src="./static/photos/8a26974ee6444acd.jpg">
  359. </div>
  360. </div>
  361. </div>
  362. </div>
  363. </div>
  364. </div>
  365. <div class="col-md-6">
  366. <div class="card">
  367. <div class="card-header">
  368. <h3 class="card-title">Carousel with indicators</h3>
  369. </div>
  370. <div class="card-body">
  371. <div id="carousel-indicators" class="carousel slide" data-bs-ride="carousel">
  372. <ol class="carousel-indicators">
  373. <li data-bs-target="#carousel-indicators" data-bs-slide-to="0" class="active"></li>
  374. <li data-bs-target="#carousel-indicators" data-bs-slide-to="1" class=""></li>
  375. <li data-bs-target="#carousel-indicators" data-bs-slide-to="2" class=""></li>
  376. <li data-bs-target="#carousel-indicators" data-bs-slide-to="3" class=""></li>
  377. <li data-bs-target="#carousel-indicators" data-bs-slide-to="4" class=""></li>
  378. </ol>
  379. <div class="carousel-inner">
  380. <div class="carousel-item active">
  381. <img class="d-block w-100" alt="" src="./static/photos/8c13ad59f739558c.jpg">
  382. </div>
  383. <div class="carousel-item">
  384. <img class="d-block w-100" alt="" src="./static/photos/8fdeb4785d2b82ef.jpg">
  385. </div>
  386. <div class="carousel-item">
  387. <img class="d-block w-100" alt="" src="./static/photos/9f36332564ca271d.jpg">
  388. </div>
  389. <div class="carousel-item">
  390. <img class="d-block w-100" alt="" src="./static/photos/35b88fc04a518c1b.jpg">
  391. </div>
  392. <div class="carousel-item">
  393. <img class="d-block w-100" alt="" src="./static/photos/36e273986ed577b8.jpg">
  394. </div>
  395. </div>
  396. </div>
  397. </div>
  398. </div>
  399. </div>
  400. <div class="col-md-6">
  401. <div class="card">
  402. <div class="card-header">
  403. <h3 class="card-title">Carousel with controls</h3>
  404. </div>
  405. <div class="card-body">
  406. <div id="carousel-controls" class="carousel slide" data-bs-ride="carousel">
  407. <div class="carousel-inner">
  408. <div class="carousel-item active">
  409. <img class="d-block w-100" alt="" src="./static/photos/75b555b99d5b38c4.jpg">
  410. </div>
  411. <div class="carousel-item">
  412. <img class="d-block w-100" alt="" src="./static/photos/546fd146c83f428c.jpg">
  413. </div>
  414. <div class="carousel-item">
  415. <img class="d-block w-100" alt="" src="./static/photos/802a16cdf5ce3551.jpg">
  416. </div>
  417. <div class="carousel-item">
  418. <img class="d-block w-100" alt="" src="./static/photos/0986f97be719fb9a.jpg">
  419. </div>
  420. <div class="carousel-item">
  421. <img class="d-block w-100" alt="" src="./static/photos/1194d63fe36a8670.jpg">
  422. </div>
  423. </div>
  424. <a class="carousel-control-prev" href="#carousel-controls" role="button" data-bs-slide="prev">
  425. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  426. <span class="visually-hidden">Previous</span>
  427. </a>
  428. <a class="carousel-control-next" href="#carousel-controls" role="button" data-bs-slide="next">
  429. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  430. <span class="visually-hidden">Next</span>
  431. </a>
  432. </div>
  433. </div>
  434. </div>
  435. </div>
  436. <div class="col-md-6">
  437. <div class="card">
  438. <div class="card-header">
  439. <h3 class="card-title">Carousel with captions</h3>
  440. </div>
  441. <div class="card-body">
  442. <div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
  443. <div class="carousel-inner">
  444. <div class="carousel-item active">
  445. <img class="d-block w-100" alt="" src="./static/photos/1366fdc9b9b277e4.jpg">
  446. <div class="carousel-item-background d-none d-md-block"></div>
  447. <div class="carousel-caption d-none d-md-block">
  448. <h3>Slide label</h3>
  449. <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  450. </div>
  451. </div>
  452. <div class="carousel-item">
  453. <img class="d-block w-100" alt="" src="./static/photos/5358d787242861c4.jpg">
  454. <div class="carousel-item-background d-none d-md-block"></div>
  455. <div class="carousel-caption d-none d-md-block">
  456. <h3>Slide label</h3>
  457. <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  458. </div>
  459. </div>
  460. <div class="carousel-item">
  461. <img class="d-block w-100" alt="" src="./static/photos/5614ec7eb9034d04.jpg">
  462. <div class="carousel-item-background d-none d-md-block"></div>
  463. <div class="carousel-caption d-none d-md-block">
  464. <h3>Slide label</h3>
  465. <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  466. </div>
  467. </div>
  468. <div class="carousel-item">
  469. <img class="d-block w-100" alt="" src="./static/photos/56614e12b2a7bd68.jpg">
  470. <div class="carousel-item-background d-none d-md-block"></div>
  471. <div class="carousel-caption d-none d-md-block">
  472. <h3>Slide label</h3>
  473. <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  474. </div>
  475. </div>
  476. <div class="carousel-item">
  477. <img class="d-block w-100" alt="" src="./static/photos/77586f6ffa9fbc5e.jpg">
  478. <div class="carousel-item-background d-none d-md-block"></div>
  479. <div class="carousel-caption d-none d-md-block">
  480. <h3>Slide label</h3>
  481. <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  482. </div>
  483. </div>
  484. </div>
  485. <a class="carousel-control-prev" href="#carousel-captions" role="button" data-bs-slide="prev">
  486. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  487. <span class="visually-hidden">Previous</span>
  488. </a>
  489. <a class="carousel-control-next" href="#carousel-captions" role="button" data-bs-slide="next">
  490. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  491. <span class="visually-hidden">Next</span>
  492. </a>
  493. </div>
  494. </div>
  495. </div>
  496. </div>
  497. </div>
  498. </div>
  499. <footer class="footer footer-transparent d-print-none">
  500. <div class="container">
  501. <div class="row text-center align-items-center flex-row-reverse">
  502. <div class="col-lg-auto ms-lg-auto">
  503. <ul class="list-inline list-inline-dots mb-0">
  504. <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
  505. <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
  506. <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
  507. </ul>
  508. </div>
  509. <div class="col-12 col-lg-auto mt-3 mt-lg-0">
  510. <ul class="list-inline list-inline-dots mb-0">
  511. <li class="list-inline-item">
  512. Copyright © 2020
  513. <a href="." class="link-secondary">Tabler</a>.
  514. All rights reserved.
  515. </li>
  516. <li class="list-inline-item">
  517. <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
  518. </li>
  519. </ul>
  520. </div>
  521. </div>
  522. </div>
  523. </footer>
  524. </div>
  525. </div>
  526. <!-- Libs JS -->
  527. <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  528. <!-- Tabler Core -->
  529. <script src="./dist/js/tabler.min.js"></script>
  530. </body>
  531. </html>