@frankenstyle/uikit 0.0.1

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 (701) hide show
  1. package/.prettierignore +15 -0
  2. package/.prettierrc.json +12 -0
  3. package/BACKERS.md +5 -0
  4. package/CHANGELOG.md +3759 -0
  5. package/CONTRIBUTING.md +96 -0
  6. package/LICENSE.md +7 -0
  7. package/README.md +65 -0
  8. package/build/build.js +95 -0
  9. package/build/icons.js +35 -0
  10. package/build/less.js +95 -0
  11. package/build/package.json +4 -0
  12. package/build/prefix.js +76 -0
  13. package/build/publishDev.js +33 -0
  14. package/build/release.js +123 -0
  15. package/build/scope.js +106 -0
  16. package/build/scss/mixin.scss +32 -0
  17. package/build/scss.js +252 -0
  18. package/build/util.js +288 -0
  19. package/build/wrapper/component.js +7 -0
  20. package/build/wrapper/icons.js +13 -0
  21. package/composer.json +17 -0
  22. package/dist/css/uikit-rtl.css +13333 -0
  23. package/dist/css/uikit-rtl.min.css +1 -0
  24. package/dist/css/uikit.css +13333 -0
  25. package/dist/css/uikit.min.css +1 -0
  26. package/dist/js/components/.gitkeep +0 -0
  27. package/dist/js/components/countdown.js +112 -0
  28. package/dist/js/components/countdown.min.js +1 -0
  29. package/dist/js/components/filter.js +527 -0
  30. package/dist/js/components/filter.min.js +1 -0
  31. package/dist/js/components/lightbox-panel.js +1695 -0
  32. package/dist/js/components/lightbox-panel.min.js +1 -0
  33. package/dist/js/components/lightbox.js +1783 -0
  34. package/dist/js/components/lightbox.min.js +1 -0
  35. package/dist/js/components/notification.js +127 -0
  36. package/dist/js/components/notification.min.js +1 -0
  37. package/dist/js/components/parallax.js +726 -0
  38. package/dist/js/components/parallax.min.js +1 -0
  39. package/dist/js/components/slider-parallax.js +637 -0
  40. package/dist/js/components/slider-parallax.min.js +1 -0
  41. package/dist/js/components/slider.js +1731 -0
  42. package/dist/js/components/slider.min.js +1 -0
  43. package/dist/js/components/slideshow-parallax.js +637 -0
  44. package/dist/js/components/slideshow-parallax.min.js +1 -0
  45. package/dist/js/components/slideshow.js +1555 -0
  46. package/dist/js/components/slideshow.min.js +1 -0
  47. package/dist/js/components/sortable.js +680 -0
  48. package/dist/js/components/sortable.min.js +1 -0
  49. package/dist/js/components/tooltip.js +446 -0
  50. package/dist/js/components/tooltip.min.js +1 -0
  51. package/dist/js/components/upload.js +235 -0
  52. package/dist/js/components/upload.min.js +1 -0
  53. package/dist/js/uikit-core.js +6726 -0
  54. package/dist/js/uikit-core.min.js +1 -0
  55. package/dist/js/uikit-icons.js +184 -0
  56. package/dist/js/uikit-icons.min.js +1 -0
  57. package/dist/js/uikit.js +10077 -0
  58. package/dist/js/uikit.min.js +1 -0
  59. package/eslint.config.mjs +35 -0
  60. package/jsconfig.json +9 -0
  61. package/package.json +66 -0
  62. package/src/images/backgrounds/accordion-close.svg +4 -0
  63. package/src/images/backgrounds/accordion-open.svg +3 -0
  64. package/src/images/backgrounds/divider-icon.svg +3 -0
  65. package/src/images/backgrounds/form-checkbox-indeterminate.svg +3 -0
  66. package/src/images/backgrounds/form-checkbox.svg +3 -0
  67. package/src/images/backgrounds/form-datalist.svg +3 -0
  68. package/src/images/backgrounds/form-radio.svg +3 -0
  69. package/src/images/backgrounds/form-select.svg +4 -0
  70. package/src/images/backgrounds/list-bullet.svg +3 -0
  71. package/src/images/components/close-icon.svg +1 -0
  72. package/src/images/components/close-large.svg +1 -0
  73. package/src/images/components/drop-parent-icon.svg +1 -0
  74. package/src/images/components/marker.svg +1 -0
  75. package/src/images/components/nav-parent-icon-large.svg +1 -0
  76. package/src/images/components/nav-parent-icon.svg +1 -0
  77. package/src/images/components/navbar-parent-icon.svg +1 -0
  78. package/src/images/components/navbar-toggle-icon.svg +34 -0
  79. package/src/images/components/overlay-icon.svg +1 -0
  80. package/src/images/components/pagination-next.svg +1 -0
  81. package/src/images/components/pagination-previous.svg +1 -0
  82. package/src/images/components/search-icon.svg +1 -0
  83. package/src/images/components/search-large.svg +1 -0
  84. package/src/images/components/search-medium.svg +1 -0
  85. package/src/images/components/slidenav-next-large.svg +1 -0
  86. package/src/images/components/slidenav-next.svg +1 -0
  87. package/src/images/components/slidenav-previous-large.svg +1 -0
  88. package/src/images/components/slidenav-previous.svg +1 -0
  89. package/src/images/components/spinner.svg +3 -0
  90. package/src/images/components/totop.svg +1 -0
  91. package/src/images/icons/500px.svg +30 -0
  92. package/src/images/icons/album.svg +5 -0
  93. package/src/images/icons/android-robot.svg +6 -0
  94. package/src/images/icons/android.svg +3 -0
  95. package/src/images/icons/apple.svg +3 -0
  96. package/src/images/icons/arrow-down-arrow-up.svg +6 -0
  97. package/src/images/icons/arrow-down.svg +4 -0
  98. package/src/images/icons/arrow-left.svg +4 -0
  99. package/src/images/icons/arrow-right.svg +4 -0
  100. package/src/images/icons/arrow-up-right.svg +4 -0
  101. package/src/images/icons/arrow-up.svg +4 -0
  102. package/src/images/icons/bag.svg +4 -0
  103. package/src/images/icons/ban.svg +4 -0
  104. package/src/images/icons/behance.svg +5 -0
  105. package/src/images/icons/bell.svg +4 -0
  106. package/src/images/icons/bluesky.svg +3 -0
  107. package/src/images/icons/bold.svg +3 -0
  108. package/src/images/icons/bolt.svg +3 -0
  109. package/src/images/icons/bookmark.svg +3 -0
  110. package/src/images/icons/calendar.svg +5 -0
  111. package/src/images/icons/camera.svg +4 -0
  112. package/src/images/icons/cart.svg +5 -0
  113. package/src/images/icons/check.svg +3 -0
  114. package/src/images/icons/chevron-double-left.svg +4 -0
  115. package/src/images/icons/chevron-double-right.svg +4 -0
  116. package/src/images/icons/chevron-down.svg +3 -0
  117. package/src/images/icons/chevron-left.svg +3 -0
  118. package/src/images/icons/chevron-right.svg +3 -0
  119. package/src/images/icons/chevron-up.svg +3 -0
  120. package/src/images/icons/clock.svg +5 -0
  121. package/src/images/icons/close-circle.svg +5 -0
  122. package/src/images/icons/close.svg +4 -0
  123. package/src/images/icons/cloud-download.svg +5 -0
  124. package/src/images/icons/cloud-upload.svg +5 -0
  125. package/src/images/icons/code.svg +4 -0
  126. package/src/images/icons/cog.svg +4 -0
  127. package/src/images/icons/comment.svg +3 -0
  128. package/src/images/icons/commenting.svg +6 -0
  129. package/src/images/icons/comments.svg +4 -0
  130. package/src/images/icons/copy.svg +4 -0
  131. package/src/images/icons/credit-card.svg +4 -0
  132. package/src/images/icons/crosshairs.svg +7 -0
  133. package/src/images/icons/database.svg +6 -0
  134. package/src/images/icons/desktop.svg +6 -0
  135. package/src/images/icons/discord.svg +3 -0
  136. package/src/images/icons/download.svg +5 -0
  137. package/src/images/icons/dribbble.svg +6 -0
  138. package/src/images/icons/etsy.svg +3 -0
  139. package/src/images/icons/expand.svg +6 -0
  140. package/src/images/icons/eye-slash.svg +5 -0
  141. package/src/images/icons/eye.svg +4 -0
  142. package/src/images/icons/facebook.svg +3 -0
  143. package/src/images/icons/file-edit.svg +4 -0
  144. package/src/images/icons/file-pdf.svg +4 -0
  145. package/src/images/icons/file-text.svg +7 -0
  146. package/src/images/icons/file.svg +3 -0
  147. package/src/images/icons/flickr.svg +4 -0
  148. package/src/images/icons/folder.svg +3 -0
  149. package/src/images/icons/forward.svg +3 -0
  150. package/src/images/icons/foursquare.svg +3 -0
  151. package/src/images/icons/future.svg +6 -0
  152. package/src/images/icons/git-branch.svg +6 -0
  153. package/src/images/icons/git-fork.svg +6 -0
  154. package/src/images/icons/github-alt.svg +3 -0
  155. package/src/images/icons/github.svg +3 -0
  156. package/src/images/icons/gitter.svg +6 -0
  157. package/src/images/icons/google.svg +3 -0
  158. package/src/images/icons/grid.svg +11 -0
  159. package/src/images/icons/happy.svg +6 -0
  160. package/src/images/icons/hashtag.svg +3 -0
  161. package/src/images/icons/heart.svg +3 -0
  162. package/src/images/icons/history.svg +6 -0
  163. package/src/images/icons/home.svg +5 -0
  164. package/src/images/icons/image.svg +6 -0
  165. package/src/images/icons/info.svg +4 -0
  166. package/src/images/icons/instagram.svg +5 -0
  167. package/src/images/icons/italic.svg +3 -0
  168. package/src/images/icons/joomla.svg +6 -0
  169. package/src/images/icons/laptop.svg +4 -0
  170. package/src/images/icons/lifesaver.svg +12 -0
  171. package/src/images/icons/link-external.svg +5 -0
  172. package/src/images/icons/link.svg +5 -0
  173. package/src/images/icons/linkedin.svg +4 -0
  174. package/src/images/icons/list.svg +8 -0
  175. package/src/images/icons/location.svg +4 -0
  176. package/src/images/icons/lock.svg +4 -0
  177. package/src/images/icons/mail.svg +4 -0
  178. package/src/images/icons/mastodon.svg +3 -0
  179. package/src/images/icons/menu.svg +5 -0
  180. package/src/images/icons/microphone.svg +6 -0
  181. package/src/images/icons/microsoft.svg +3 -0
  182. package/src/images/icons/minus-circle.svg +4 -0
  183. package/src/images/icons/minus.svg +3 -0
  184. package/src/images/icons/more-vertical.svg +5 -0
  185. package/src/images/icons/more.svg +5 -0
  186. package/src/images/icons/move.svg +8 -0
  187. package/src/images/icons/nut.svg +4 -0
  188. package/src/images/icons/paint-bucket.svg +6 -0
  189. package/src/images/icons/pencil.svg +4 -0
  190. package/src/images/icons/phone-landscape.svg +4 -0
  191. package/src/images/icons/phone.svg +4 -0
  192. package/src/images/icons/pinterest.svg +3 -0
  193. package/src/images/icons/play-circle.svg +4 -0
  194. package/src/images/icons/play.svg +3 -0
  195. package/src/images/icons/plus-circle.svg +5 -0
  196. package/src/images/icons/plus.svg +4 -0
  197. package/src/images/icons/print.svg +7 -0
  198. package/src/images/icons/pull.svg +5 -0
  199. package/src/images/icons/push.svg +5 -0
  200. package/src/images/icons/question.svg +5 -0
  201. package/src/images/icons/quote-right.svg +4 -0
  202. package/src/images/icons/receiver.svg +3 -0
  203. package/src/images/icons/reddit.svg +6 -0
  204. package/src/images/icons/refresh.svg +4 -0
  205. package/src/images/icons/reply.svg +3 -0
  206. package/src/images/icons/rss.svg +5 -0
  207. package/src/images/icons/search.svg +4 -0
  208. package/src/images/icons/server.svg +15 -0
  209. package/src/images/icons/settings.svg +11 -0
  210. package/src/images/icons/shrink.svg +6 -0
  211. package/src/images/icons/sign-in.svg +5 -0
  212. package/src/images/icons/sign-out.svg +5 -0
  213. package/src/images/icons/signal.svg +3 -0
  214. package/src/images/icons/social.svg +7 -0
  215. package/src/images/icons/sorting.svg +6 -0
  216. package/src/images/icons/soundcloud.svg +6 -0
  217. package/src/images/icons/star.svg +3 -0
  218. package/src/images/icons/strikethrough.svg +4 -0
  219. package/src/images/icons/table.svg +6 -0
  220. package/src/images/icons/tablet-landscape.svg +4 -0
  221. package/src/images/icons/tablet.svg +4 -0
  222. package/src/images/icons/tag.svg +4 -0
  223. package/src/images/icons/telegram.svg +3 -0
  224. package/src/images/icons/threads.svg +3 -0
  225. package/src/images/icons/thumbnails.svg +6 -0
  226. package/src/images/icons/tiktok.svg +3 -0
  227. package/src/images/icons/trash.svg +7 -0
  228. package/src/images/icons/triangle-down.svg +3 -0
  229. package/src/images/icons/triangle-left.svg +3 -0
  230. package/src/images/icons/triangle-right.svg +3 -0
  231. package/src/images/icons/triangle-up.svg +3 -0
  232. package/src/images/icons/tripadvisor.svg +19 -0
  233. package/src/images/icons/tumblr.svg +3 -0
  234. package/src/images/icons/tv.svg +4 -0
  235. package/src/images/icons/twitch.svg +5 -0
  236. package/src/images/icons/twitter.svg +3 -0
  237. package/src/images/icons/uikit.svg +4 -0
  238. package/src/images/icons/unlock.svg +4 -0
  239. package/src/images/icons/upload.svg +5 -0
  240. package/src/images/icons/user.svg +4 -0
  241. package/src/images/icons/users.svg +5 -0
  242. package/src/images/icons/video-camera.svg +3 -0
  243. package/src/images/icons/vimeo.svg +3 -0
  244. package/src/images/icons/warning.svg +5 -0
  245. package/src/images/icons/whatsapp.svg +3 -0
  246. package/src/images/icons/wordpress.svg +3 -0
  247. package/src/images/icons/world.svg +7 -0
  248. package/src/images/icons/x.svg +3 -0
  249. package/src/images/icons/xing.svg +4 -0
  250. package/src/images/icons/yelp.svg +15 -0
  251. package/src/images/icons/yootheme.svg +3 -0
  252. package/src/images/icons/youtube.svg +3 -0
  253. package/src/js/api/app.js +12 -0
  254. package/src/js/api/boot.js +84 -0
  255. package/src/js/api/component.js +84 -0
  256. package/src/js/api/computed.js +80 -0
  257. package/src/js/api/events.js +33 -0
  258. package/src/js/api/global.js +74 -0
  259. package/src/js/api/hooks.js +51 -0
  260. package/src/js/api/index.js +8 -0
  261. package/src/js/api/instance.js +66 -0
  262. package/src/js/api/log.js +10 -0
  263. package/src/js/api/observables.js +132 -0
  264. package/src/js/api/observer.js +64 -0
  265. package/src/js/api/options.js +180 -0
  266. package/src/js/api/props.js +107 -0
  267. package/src/js/api/state.js +65 -0
  268. package/src/js/api/update.js +66 -0
  269. package/src/js/api/watch.js +30 -0
  270. package/src/js/components/countdown.js +113 -0
  271. package/src/js/components/filter.js +211 -0
  272. package/src/js/components/index.js +13 -0
  273. package/src/js/components/internal/lightbox-animations.js +40 -0
  274. package/src/js/components/internal/slider-preload.js +14 -0
  275. package/src/js/components/internal/slider-transitioner.js +186 -0
  276. package/src/js/components/internal/slideshow-animations.js +100 -0
  277. package/src/js/components/lightbox-panel.js +482 -0
  278. package/src/js/components/lightbox.js +136 -0
  279. package/src/js/components/notification.js +134 -0
  280. package/src/js/components/parallax.js +86 -0
  281. package/src/js/components/slider-parallax.js +81 -0
  282. package/src/js/components/slider.js +388 -0
  283. package/src/js/components/slideshow-parallax.js +1 -0
  284. package/src/js/components/slideshow.js +44 -0
  285. package/src/js/components/sortable.js +448 -0
  286. package/src/js/components/tooltip.js +183 -0
  287. package/src/js/components/upload.js +248 -0
  288. package/src/js/core/accordion.js +244 -0
  289. package/src/js/core/alert.js +59 -0
  290. package/src/js/core/cover.js +57 -0
  291. package/src/js/core/drop.js +514 -0
  292. package/src/js/core/dropnav.js +449 -0
  293. package/src/js/core/form-custom.js +74 -0
  294. package/src/js/core/grid.js +210 -0
  295. package/src/js/core/height-match.js +79 -0
  296. package/src/js/core/height-placeholder.js +35 -0
  297. package/src/js/core/height-viewport.js +98 -0
  298. package/src/js/core/icon.js +285 -0
  299. package/src/js/core/img.js +157 -0
  300. package/src/js/core/index.js +49 -0
  301. package/src/js/core/inverse.js +173 -0
  302. package/src/js/core/leader.js +52 -0
  303. package/src/js/core/margin.js +125 -0
  304. package/src/js/core/modal.js +179 -0
  305. package/src/js/core/nav.js +11 -0
  306. package/src/js/core/navbar.js +96 -0
  307. package/src/js/core/offcanvas.js +178 -0
  308. package/src/js/core/overflow-auto.js +50 -0
  309. package/src/js/core/overflow-fade.js +67 -0
  310. package/src/js/core/responsive.js +10 -0
  311. package/src/js/core/scroll.js +71 -0
  312. package/src/js/core/scrollspy-nav.js +112 -0
  313. package/src/js/core/scrollspy.js +141 -0
  314. package/src/js/core/sticky.js +509 -0
  315. package/src/js/core/svg.js +101 -0
  316. package/src/js/core/switcher.js +246 -0
  317. package/src/js/core/tab.js +31 -0
  318. package/src/js/core/toggle.js +225 -0
  319. package/src/js/core/video.js +128 -0
  320. package/src/js/mixin/animate.js +34 -0
  321. package/src/js/mixin/class.js +7 -0
  322. package/src/js/mixin/container.js +17 -0
  323. package/src/js/mixin/event.js +5 -0
  324. package/src/js/mixin/i18n.js +21 -0
  325. package/src/js/mixin/internal/animate-fade.js +141 -0
  326. package/src/js/mixin/internal/animate-slide.js +163 -0
  327. package/src/js/mixin/internal/slideshow-animations.js +28 -0
  328. package/src/js/mixin/internal/slideshow-transitioner.js +73 -0
  329. package/src/js/mixin/media.js +53 -0
  330. package/src/js/mixin/modal.js +313 -0
  331. package/src/js/mixin/parallax.js +408 -0
  332. package/src/js/mixin/position.js +113 -0
  333. package/src/js/mixin/slider-autoplay.js +71 -0
  334. package/src/js/mixin/slider-drag.js +236 -0
  335. package/src/js/mixin/slider-nav.js +248 -0
  336. package/src/js/mixin/slider-parallax.js +147 -0
  337. package/src/js/mixin/slider-reactive.js +19 -0
  338. package/src/js/mixin/slider.js +228 -0
  339. package/src/js/mixin/slideshow.js +46 -0
  340. package/src/js/mixin/svg.js +121 -0
  341. package/src/js/mixin/togglable.js +258 -0
  342. package/src/js/uikit-core.js +11 -0
  343. package/src/js/uikit.js +7 -0
  344. package/src/js/util/animation.js +122 -0
  345. package/src/js/util/attr.js +42 -0
  346. package/src/js/util/await.js +7 -0
  347. package/src/js/util/class.js +53 -0
  348. package/src/js/util/dimensions.js +220 -0
  349. package/src/js/util/dom.js +118 -0
  350. package/src/js/util/env.js +12 -0
  351. package/src/js/util/event.js +142 -0
  352. package/src/js/util/fastdom.js +62 -0
  353. package/src/js/util/filter.js +91 -0
  354. package/src/js/util/index.js +17 -0
  355. package/src/js/util/keys.js +11 -0
  356. package/src/js/util/lang.js +280 -0
  357. package/src/js/util/mouse.js +80 -0
  358. package/src/js/util/observer.js +49 -0
  359. package/src/js/util/player.js +98 -0
  360. package/src/js/util/position.js +235 -0
  361. package/src/js/util/scroll.js +64 -0
  362. package/src/js/util/selector.js +143 -0
  363. package/src/js/util/style.js +96 -0
  364. package/src/js/util/svg.js +10 -0
  365. package/src/js/util/viewport.js +251 -0
  366. package/src/less/components/_import.less +96 -0
  367. package/src/less/components/accordion.less +122 -0
  368. package/src/less/components/alert.less +146 -0
  369. package/src/less/components/align.less +142 -0
  370. package/src/less/components/animation.less +283 -0
  371. package/src/less/components/article.less +110 -0
  372. package/src/less/components/background.less +140 -0
  373. package/src/less/components/badge.less +90 -0
  374. package/src/less/components/base.less +740 -0
  375. package/src/less/components/breadcrumb.less +157 -0
  376. package/src/less/components/button.less +540 -0
  377. package/src/less/components/card.less +441 -0
  378. package/src/less/components/close.less +67 -0
  379. package/src/less/components/column.less +143 -0
  380. package/src/less/components/comment.less +160 -0
  381. package/src/less/components/container.less +185 -0
  382. package/src/less/components/countdown.less +112 -0
  383. package/src/less/components/cover.less +76 -0
  384. package/src/less/components/description-list.less +71 -0
  385. package/src/less/components/divider.less +176 -0
  386. package/src/less/components/dotnav.less +177 -0
  387. package/src/less/components/drop.less +78 -0
  388. package/src/less/components/dropbar.less +131 -0
  389. package/src/less/components/dropdown.less +213 -0
  390. package/src/less/components/dropnav.less +43 -0
  391. package/src/less/components/flex.less +308 -0
  392. package/src/less/components/form-range.less +191 -0
  393. package/src/less/components/form.less +930 -0
  394. package/src/less/components/grid.less +419 -0
  395. package/src/less/components/heading.less +289 -0
  396. package/src/less/components/height.less +57 -0
  397. package/src/less/components/icon.less +313 -0
  398. package/src/less/components/iconnav.less +163 -0
  399. package/src/less/components/inverse.less +64 -0
  400. package/src/less/components/label.less +110 -0
  401. package/src/less/components/leader.less +75 -0
  402. package/src/less/components/lightbox.less +215 -0
  403. package/src/less/components/link.less +167 -0
  404. package/src/less/components/list.less +245 -0
  405. package/src/less/components/margin.less +263 -0
  406. package/src/less/components/marker.less +74 -0
  407. package/src/less/components/mixin.less +20 -0
  408. package/src/less/components/modal.less +366 -0
  409. package/src/less/components/nav.less +755 -0
  410. package/src/less/components/navbar.less +681 -0
  411. package/src/less/components/notification.less +191 -0
  412. package/src/less/components/offcanvas.less +329 -0
  413. package/src/less/components/overlay.less +92 -0
  414. package/src/less/components/padding.less +81 -0
  415. package/src/less/components/pagination.less +159 -0
  416. package/src/less/components/placeholder.less +45 -0
  417. package/src/less/components/position.less +241 -0
  418. package/src/less/components/print.less +61 -0
  419. package/src/less/components/progress.less +83 -0
  420. package/src/less/components/search.less +488 -0
  421. package/src/less/components/section.less +257 -0
  422. package/src/less/components/slidenav.less +137 -0
  423. package/src/less/components/slider.less +123 -0
  424. package/src/less/components/slideshow.less +93 -0
  425. package/src/less/components/sortable.less +90 -0
  426. package/src/less/components/spinner.less +74 -0
  427. package/src/less/components/sticky.less +65 -0
  428. package/src/less/components/subnav.less +317 -0
  429. package/src/less/components/svg.less +36 -0
  430. package/src/less/components/switcher.less +47 -0
  431. package/src/less/components/tab.less +222 -0
  432. package/src/less/components/table.less +352 -0
  433. package/src/less/components/text.less +296 -0
  434. package/src/less/components/thumbnav.less +133 -0
  435. package/src/less/components/tile.less +247 -0
  436. package/src/less/components/tooltip.less +79 -0
  437. package/src/less/components/totop.less +86 -0
  438. package/src/less/components/transition.less +172 -0
  439. package/src/less/components/utility.less +584 -0
  440. package/src/less/components/variables.less +123 -0
  441. package/src/less/components/visibility.less +164 -0
  442. package/src/less/components/width.less +489 -0
  443. package/src/less/theme/_import.less +82 -0
  444. package/src/less/theme/accordion.less +82 -0
  445. package/src/less/theme/alert.less +76 -0
  446. package/src/less/theme/align.less +14 -0
  447. package/src/less/theme/animation.less +14 -0
  448. package/src/less/theme/article.less +60 -0
  449. package/src/less/theme/background.less +14 -0
  450. package/src/less/theme/badge.less +29 -0
  451. package/src/less/theme/base.less +134 -0
  452. package/src/less/theme/breadcrumb.less +45 -0
  453. package/src/less/theme/button.less +212 -0
  454. package/src/less/theme/card.less +236 -0
  455. package/src/less/theme/close.less +32 -0
  456. package/src/less/theme/column.less +14 -0
  457. package/src/less/theme/comment.less +72 -0
  458. package/src/less/theme/container.less +14 -0
  459. package/src/less/theme/countdown.less +53 -0
  460. package/src/less/theme/description-list.less +36 -0
  461. package/src/less/theme/divider.less +49 -0
  462. package/src/less/theme/dotnav.less +57 -0
  463. package/src/less/theme/drop.less +14 -0
  464. package/src/less/theme/dropbar.less +44 -0
  465. package/src/less/theme/dropdown.less +59 -0
  466. package/src/less/theme/form-range.less +57 -0
  467. package/src/less/theme/form.less +154 -0
  468. package/src/less/theme/grid.less +28 -0
  469. package/src/less/theme/heading.less +71 -0
  470. package/src/less/theme/height.less +14 -0
  471. package/src/less/theme/icon.less +67 -0
  472. package/src/less/theme/iconnav.less +44 -0
  473. package/src/less/theme/inverse.less +14 -0
  474. package/src/less/theme/label.less +46 -0
  475. package/src/less/theme/leader.less +26 -0
  476. package/src/less/theme/lightbox.less +32 -0
  477. package/src/less/theme/link.less +55 -0
  478. package/src/less/theme/list.less +50 -0
  479. package/src/less/theme/margin.less +14 -0
  480. package/src/less/theme/marker.less +31 -0
  481. package/src/less/theme/modal.less +102 -0
  482. package/src/less/theme/nav.less +142 -0
  483. package/src/less/theme/navbar.less +179 -0
  484. package/src/less/theme/notification.less +44 -0
  485. package/src/less/theme/offcanvas.less +32 -0
  486. package/src/less/theme/overlay.less +33 -0
  487. package/src/less/theme/padding.less +14 -0
  488. package/src/less/theme/pagination.less +41 -0
  489. package/src/less/theme/placeholder.less +29 -0
  490. package/src/less/theme/position.less +14 -0
  491. package/src/less/theme/progress.less +27 -0
  492. package/src/less/theme/search.less +121 -0
  493. package/src/less/theme/section.less +32 -0
  494. package/src/less/theme/slidenav.less +52 -0
  495. package/src/less/theme/slider.less +14 -0
  496. package/src/less/theme/sortable.less +38 -0
  497. package/src/less/theme/spinner.less +14 -0
  498. package/src/less/theme/sticky.less +14 -0
  499. package/src/less/theme/subnav.less +79 -0
  500. package/src/less/theme/tab.less +138 -0
  501. package/src/less/theme/table.less +86 -0
  502. package/src/less/theme/text.less +61 -0
  503. package/src/less/theme/thumbnav.less +65 -0
  504. package/src/less/theme/tile.less +52 -0
  505. package/src/less/theme/tooltip.less +20 -0
  506. package/src/less/theme/totop.less +32 -0
  507. package/src/less/theme/transition.less +14 -0
  508. package/src/less/theme/utility.less +52 -0
  509. package/src/less/theme/variables.less +36 -0
  510. package/src/less/theme/width.less +14 -0
  511. package/src/less/uikit.less +5 -0
  512. package/src/less/uikit.theme.less +11 -0
  513. package/src/scss/components/_import.scss +96 -0
  514. package/src/scss/components/accordion.scss +100 -0
  515. package/src/scss/components/alert.scss +133 -0
  516. package/src/scss/components/align.scss +141 -0
  517. package/src/scss/components/animation.scss +278 -0
  518. package/src/scss/components/article.scss +93 -0
  519. package/src/scss/components/background.scss +138 -0
  520. package/src/scss/components/badge.scss +71 -0
  521. package/src/scss/components/base.scss +561 -0
  522. package/src/scss/components/breadcrumb.scss +115 -0
  523. package/src/scss/components/button.scss +374 -0
  524. package/src/scss/components/card.scss +379 -0
  525. package/src/scss/components/close.scss +53 -0
  526. package/src/scss/components/column.scss +136 -0
  527. package/src/scss/components/comment.scss +153 -0
  528. package/src/scss/components/container.scss +180 -0
  529. package/src/scss/components/countdown.scss +93 -0
  530. package/src/scss/components/cover.scss +78 -0
  531. package/src/scss/components/description-list.scss +68 -0
  532. package/src/scss/components/divider.scss +137 -0
  533. package/src/scss/components/dotnav.scss +144 -0
  534. package/src/scss/components/drop.scss +75 -0
  535. package/src/scss/components/dropbar.scss +123 -0
  536. package/src/scss/components/dropdown.scss +192 -0
  537. package/src/scss/components/dropnav.scss +44 -0
  538. package/src/scss/components/flex.scss +310 -0
  539. package/src/scss/components/form-range.scss +147 -0
  540. package/src/scss/components/form.scss +771 -0
  541. package/src/scss/components/grid.scss +394 -0
  542. package/src/scss/components/heading.scss +227 -0
  543. package/src/scss/components/height.scss +56 -0
  544. package/src/scss/components/icon.scss +228 -0
  545. package/src/scss/components/iconnav.scss +140 -0
  546. package/src/scss/components/inverse.scss +51 -0
  547. package/src/scss/components/label.scss +90 -0
  548. package/src/scss/components/leader.scss +69 -0
  549. package/src/scss/components/lightbox.scss +205 -0
  550. package/src/scss/components/link.scss +131 -0
  551. package/src/scss/components/list.scss +199 -0
  552. package/src/scss/components/margin.scss +257 -0
  553. package/src/scss/components/marker.scss +56 -0
  554. package/src/scss/components/mixin.scss +34 -0
  555. package/src/scss/components/modal.scss +336 -0
  556. package/src/scss/components/nav.scss +533 -0
  557. package/src/scss/components/navbar.scss +579 -0
  558. package/src/scss/components/notification.scss +178 -0
  559. package/src/scss/components/offcanvas.scss +318 -0
  560. package/src/scss/components/overlay.scss +88 -0
  561. package/src/scss/components/padding.scss +78 -0
  562. package/src/scss/components/pagination.scss +127 -0
  563. package/src/scss/components/placeholder.scss +43 -0
  564. package/src/scss/components/position.scss +240 -0
  565. package/src/scss/components/print.scss +63 -0
  566. package/src/scss/components/progress.scss +81 -0
  567. package/src/scss/components/search.scss +367 -0
  568. package/src/scss/components/section.scss +243 -0
  569. package/src/scss/components/slidenav.scss +112 -0
  570. package/src/scss/components/slider.scss +121 -0
  571. package/src/scss/components/slideshow.scss +95 -0
  572. package/src/scss/components/sortable.scss +89 -0
  573. package/src/scss/components/spinner.scss +73 -0
  574. package/src/scss/components/sticky.scss +64 -0
  575. package/src/scss/components/subnav.scss +222 -0
  576. package/src/scss/components/svg.scss +38 -0
  577. package/src/scss/components/switcher.scss +49 -0
  578. package/src/scss/components/tab.scss +186 -0
  579. package/src/scss/components/table.scss +293 -0
  580. package/src/scss/components/text.scss +256 -0
  581. package/src/scss/components/thumbnav.scss +119 -0
  582. package/src/scss/components/tile.scss +230 -0
  583. package/src/scss/components/tooltip.scss +72 -0
  584. package/src/scss/components/totop.scss +64 -0
  585. package/src/scss/components/transition.scss +169 -0
  586. package/src/scss/components/utility.scss +545 -0
  587. package/src/scss/components/variables.scss +84 -0
  588. package/src/scss/components/visibility.scss +166 -0
  589. package/src/scss/components/width.scss +487 -0
  590. package/src/scss/mixins-theme.scss +2298 -0
  591. package/src/scss/mixins.scss +1896 -0
  592. package/src/scss/uikit-theme.scss +8 -0
  593. package/src/scss/uikit.scss +5 -0
  594. package/src/scss/variables-theme.scss +1325 -0
  595. package/src/scss/variables.scss +1190 -0
  596. package/tests/accordion.html +214 -0
  597. package/tests/alert.html +124 -0
  598. package/tests/align.html +133 -0
  599. package/tests/animation.html +252 -0
  600. package/tests/article.html +167 -0
  601. package/tests/background.html +67 -0
  602. package/tests/badge.html +93 -0
  603. package/tests/base.html +244 -0
  604. package/tests/breadcrumb.html +64 -0
  605. package/tests/button.html +257 -0
  606. package/tests/card.html +630 -0
  607. package/tests/close.html +74 -0
  608. package/tests/column.html +71 -0
  609. package/tests/comment.html +209 -0
  610. package/tests/container.html +266 -0
  611. package/tests/countdown.html +716 -0
  612. package/tests/cover.html +167 -0
  613. package/tests/description-list.html +51 -0
  614. package/tests/divider.html +89 -0
  615. package/tests/dotnav.html +139 -0
  616. package/tests/drop.html +782 -0
  617. package/tests/dropbar.html +551 -0
  618. package/tests/dropdown.html +286 -0
  619. package/tests/dropnav.html +856 -0
  620. package/tests/filter.html +287 -0
  621. package/tests/flex.html +182 -0
  622. package/tests/form.html +675 -0
  623. package/tests/grid-masonry.html +80 -0
  624. package/tests/grid-parallax.html +171 -0
  625. package/tests/grid.html +679 -0
  626. package/tests/heading.html +337 -0
  627. package/tests/height-expand.html +32 -0
  628. package/tests/height-viewport.html +253 -0
  629. package/tests/height.html +160 -0
  630. package/tests/icon.html +907 -0
  631. package/tests/iconnav.html +40 -0
  632. package/tests/image.html +642 -0
  633. package/tests/images/avatar.jpg +0 -0
  634. package/tests/images/dark.jpg +0 -0
  635. package/tests/images/icons.svg +24 -0
  636. package/tests/images/image-type.avif +0 -0
  637. package/tests/images/image-type.jpeg +0 -0
  638. package/tests/images/image-type.webp +0 -0
  639. package/tests/images/light.jpg +0 -0
  640. package/tests/images/photo.jpg +0 -0
  641. package/tests/images/photo2.jpg +0 -0
  642. package/tests/images/photo3.jpg +0 -0
  643. package/tests/images/size-h.jpg +0 -0
  644. package/tests/images/size-v.jpg +0 -0
  645. package/tests/images/size1.jpg +0 -0
  646. package/tests/images/size2.jpg +0 -0
  647. package/tests/images/slider1.jpg +0 -0
  648. package/tests/images/slider2.jpg +0 -0
  649. package/tests/images/slider3.jpg +0 -0
  650. package/tests/images/slider4.jpg +0 -0
  651. package/tests/images/slider5.jpg +0 -0
  652. package/tests/index.html +905 -0
  653. package/tests/js/index.js +171 -0
  654. package/tests/label.html +28 -0
  655. package/tests/leader.html +67 -0
  656. package/tests/lightbox.html +689 -0
  657. package/tests/link.html +121 -0
  658. package/tests/list.html +490 -0
  659. package/tests/margin.html +208 -0
  660. package/tests/marker.html +87 -0
  661. package/tests/modal.html +497 -0
  662. package/tests/nav.html +487 -0
  663. package/tests/navbar.html +2746 -0
  664. package/tests/notification.html +137 -0
  665. package/tests/offcanvas.html +780 -0
  666. package/tests/overlay.html +102 -0
  667. package/tests/padding.html +52 -0
  668. package/tests/pagination.html +140 -0
  669. package/tests/parallax.html +298 -0
  670. package/tests/placeholder.html +33 -0
  671. package/tests/position.html +436 -0
  672. package/tests/progress.html +59 -0
  673. package/tests/scroll.html +118 -0
  674. package/tests/scrollspy.html +593 -0
  675. package/tests/search.html +535 -0
  676. package/tests/section.html +384 -0
  677. package/tests/slidenav.html +333 -0
  678. package/tests/slider.html +661 -0
  679. package/tests/slideshow.html +565 -0
  680. package/tests/sortable.html +300 -0
  681. package/tests/spinner.html +25 -0
  682. package/tests/sticky-navbar.html +1421 -0
  683. package/tests/sticky-parallax.html +279 -0
  684. package/tests/sticky.html +429 -0
  685. package/tests/subnav.html +282 -0
  686. package/tests/svg.html +78 -0
  687. package/tests/switcher.html +394 -0
  688. package/tests/tab.html +266 -0
  689. package/tests/table.html +329 -0
  690. package/tests/text.html +155 -0
  691. package/tests/thumbnav.html +64 -0
  692. package/tests/tile.html +226 -0
  693. package/tests/toggle.html +186 -0
  694. package/tests/tooltip.html +126 -0
  695. package/tests/totop.html +68 -0
  696. package/tests/transition.html +246 -0
  697. package/tests/upload.html +290 -0
  698. package/tests/utility.html +644 -0
  699. package/tests/video.html +206 -0
  700. package/tests/visibility.html +112 -0
  701. package/tests/width.html +130 -0
package/tests/slider.html ADDED
@@ -0,0 +1,661 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-gb" dir="ltr">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title>Slider - UIkit tests</title>
8
+ <script src="js/test.js"></script>
9
+ <style>
10
+
11
+ .test > :nth-child(10n-9) > canvas { background: rgba(0,0,0,0.1); }
12
+ .test > :nth-child(10n-8) > canvas { background: rgba(0,0,0,0.15); }
13
+ .test > :nth-child(10n-7) > canvas { background: rgba(0,0,0,0.2); }
14
+ .test > :nth-child(10n-6) > canvas { background: rgba(0,0,0,0.25); }
15
+ .test > :nth-child(10n-5) > canvas { background: rgba(0,0,0,0.3); }
16
+ .test > :nth-child(10n-4) > canvas { background: rgba(0,0,0,0.35); }
17
+ .test > :nth-child(10n-3) > canvas { background: rgba(0,0,0,0.40); }
18
+ .test > :nth-child(10n-2) > canvas { background: rgba(0,0,0,0.45); }
19
+ .test > :nth-child(10n-1) > canvas { background: rgba(0,0,0,0.50); }
20
+ .test > :nth-child(10n) > canvas { background: rgba(0,0,0,0.55); }
21
+
22
+ </style>
23
+ </head>
24
+
25
+ <body>
26
+
27
+ <div class="uk-container">
28
+
29
+ <h1>Slider</h1>
30
+
31
+ <div class="uk-margin">
32
+ <select id="js-center-switcher" class="uk-select uk-form-width-small" aria-label="Center switcher">
33
+ <option value="0">Not centered</option>
34
+ <option value="1">Center</option>
35
+ </select>
36
+ <select id="js-finite-switcher" class="uk-select uk-form-width-small" aria-label="Finite switcher">
37
+ <option value="0">Infinite</option>
38
+ <option value="1">Finite</option>
39
+ </select>
40
+ <select id="js-sets-switcher" class="uk-select uk-form-width-small" aria-label="Sets switcher">
41
+ <option value="0">Single</option>
42
+ <option value="1">Sets</option>
43
+ </select>
44
+ <select id="js-active-switcher" class="uk-select uk-form-width-small" aria-label="Active switcher">
45
+ <option value="">All</option>
46
+ <option value="first">First</option>
47
+ </select>
48
+ </div>
49
+
50
+ <h2>Content Widths</h2>
51
+
52
+ <div uk-slider>
53
+
54
+ <div class="uk-position-relative">
55
+
56
+ <div class="uk-slider-container uk-light">
57
+ <div class="test uk-slider-items">
58
+ <div>
59
+ <canvas width="320" height="200"></canvas>
60
+ <div class="uk-position-center uk-panel"><h1>1</h1></div>
61
+ </div>
62
+ <div>
63
+ <canvas width="320" height="200"></canvas>
64
+ <div class="uk-position-center uk-panel"><h1>2</h1></div>
65
+ </div>
66
+ <div>
67
+ <canvas width="320" height="200"></canvas>
68
+ <div class="uk-position-center uk-panel"><h1>3</h1></div>
69
+ </div>
70
+ <div>
71
+ <canvas width="320" height="200"></canvas>
72
+ <div class="uk-position-center uk-panel"><h1>4</h1></div>
73
+ </div>
74
+ <div>
75
+ <canvas width="320" height="200"></canvas>
76
+ <div class="uk-position-center uk-panel"><h1>5</h1></div>
77
+ </div>
78
+ <div>
79
+ <canvas width="320" height="200"></canvas>
80
+ <div class="uk-position-center uk-panel"><h1>6</h1></div>
81
+ </div>
82
+ <div>
83
+ <canvas width="320" height="200"></canvas>
84
+ <div class="uk-position-center uk-panel"><h1>7</h1></div>
85
+ </div>
86
+ <div>
87
+ <canvas width="320" height="200"></canvas>
88
+ <div class="uk-position-center uk-panel"><h1>8</h1></div>
89
+ </div>
90
+ <div>
91
+ <canvas width="320" height="200"></canvas>
92
+ <div class="uk-position-center uk-panel"><h1>9</h1></div>
93
+ </div>
94
+ <div>
95
+ <canvas width="320" height="200"></canvas>
96
+ <div class="uk-position-center uk-panel"><h1>10</h1></div>
97
+ </div>
98
+ <div>
99
+ <canvas width="320" height="200"></canvas>
100
+ <div class="uk-position-center uk-panel"><h1>11</h1></div>
101
+ </div>
102
+ <div>
103
+ <canvas width="320" height="200"></canvas>
104
+ <div class="uk-position-center uk-panel"><h1>12</h1></div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="uk-hidden@xl uk-light">
110
+ <a class="uk-position-center-left uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
111
+ <a class="uk-position-center-right uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
112
+ </div>
113
+
114
+ <div class="uk-visible@xl">
115
+ <a class="uk-position-center-left-out uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
116
+ <a class="uk-position-center-right-out uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
117
+ </div>
118
+
119
+ <!-- Alternative markup
120
+
121
+ <div class="uk-visible@s uk-dark" uk-toggle="cls: uk-dark uk-light; mode: media; media: @xl">
122
+ <a class="uk-position-center-left-out uk-position-small" uk-toggle="cls: uk-position-center-left-out uk-position-center-left; mode: media; media: @xl" href uk-slidenav-previous uk-slider-item="previous"></a>
123
+ <a class="uk-position-center-right-out uk-position-small" uk-toggle="cls: uk-position-center-right-out uk-position-center-right; mode: media; media: @xl" href uk-slidenav-next uk-slider-item="next"></a>
124
+ </div>
125
+
126
+ -->
127
+
128
+ </div>
129
+
130
+ <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
131
+
132
+ </div>
133
+
134
+ <h3>Different Widths</h3>
135
+
136
+ <div uk-slider>
137
+
138
+ <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
139
+
140
+ <div class="test uk-slider-items">
141
+ <div>
142
+ <canvas width="400" height="200"></canvas>
143
+ <div class="uk-position-center uk-panel"><h1>1</h1></div>
144
+ </div>
145
+ <div>
146
+ <canvas width="240" height="200"></canvas>
147
+ <div class="uk-position-center uk-panel"><h1>2</h1></div>
148
+ </div>
149
+ <div>
150
+ <canvas width="480" height="200"></canvas>
151
+ <div class="uk-position-center uk-panel"><h1>3</h1></div>
152
+ </div>
153
+ <div>
154
+ <canvas width="300" height="200"></canvas>
155
+ <div class="uk-position-center uk-panel"><h1>4</h1></div>
156
+ </div>
157
+ <div>
158
+ <canvas width="400" height="200"></canvas>
159
+ <div class="uk-position-center uk-panel"><h1>5</h1></div>
160
+ </div>
161
+ <div>
162
+ <canvas width="240" height="200"></canvas>
163
+ <div class="uk-position-center uk-panel"><h1>6</h1></div>
164
+ </div>
165
+ <div>
166
+ <canvas width="480" height="200"></canvas>
167
+ <div class="uk-position-center uk-panel"><h1>7</h1></div>
168
+ </div>
169
+ <div>
170
+ <canvas width="300" height="200"></canvas>
171
+ <div class="uk-position-center uk-panel"><h1>8</h1></div>
172
+ </div>
173
+ <div>
174
+ <canvas width="400" height="200"></canvas>
175
+ <div class="uk-position-center uk-panel"><h1>9</h1></div>
176
+ </div>
177
+ <div>
178
+ <canvas width="240" height="200"></canvas>
179
+ <div class="uk-position-center uk-panel"><h1>10</h1></div>
180
+ </div>
181
+ <div>
182
+ <canvas width="480" height="200"></canvas>
183
+ <div class="uk-position-center uk-panel"><h1>11</h1></div>
184
+ </div>
185
+ <div>
186
+ <canvas width="300" height="200"></canvas>
187
+ <div class="uk-position-center uk-panel"><h1>12</h1></div>
188
+ </div>
189
+ </div>
190
+
191
+ <a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
192
+ <a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
193
+
194
+ </div>
195
+
196
+ <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
197
+
198
+ </div>
199
+
200
+ <h2>Width Classes + Toggle on active</h2>
201
+
202
+ <div uk-slider="clsActivated: uk-transition-active">
203
+
204
+ <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
205
+
206
+ <div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m">
207
+ <div>
208
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
209
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
210
+ </div>
211
+ <div>
212
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
213
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
214
+ </div>
215
+ <div>
216
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
217
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
218
+ </div>
219
+ <div>
220
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
221
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
222
+ </div>
223
+ <div>
224
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
225
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
226
+ </div>
227
+ <div>
228
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
229
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
230
+ </div>
231
+ <div>
232
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
233
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
234
+ </div>
235
+ <div>
236
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
237
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
238
+ </div>
239
+ <div>
240
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
241
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
242
+ </div>
243
+ <div>
244
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
245
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
246
+ </div>
247
+ </div>
248
+
249
+ <a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
250
+ <a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
251
+
252
+ </div>
253
+
254
+ <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
255
+
256
+ </div>
257
+
258
+ <h2>Grid + Toggle on hover</h2>
259
+
260
+ <div uk-slider>
261
+
262
+ <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
263
+
264
+ <div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m uk-grid">
265
+ <div>
266
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
267
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
268
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
269
+ </div>
270
+ </div>
271
+ <div>
272
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
273
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
274
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
275
+ </div>
276
+ </div>
277
+ <div>
278
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
279
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
280
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
281
+ </div>
282
+ </div>
283
+ <div>
284
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
285
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
286
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
287
+ </div>
288
+ </div>
289
+ <div>
290
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
291
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
292
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
293
+ </div>
294
+ </div>
295
+ <div>
296
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
297
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
298
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
299
+ </div>
300
+ </div>
301
+ <div>
302
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
303
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
304
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
305
+ </div>
306
+ </div>
307
+ <div>
308
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
309
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
310
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
311
+ </div>
312
+ </div>
313
+ <div>
314
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
315
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
316
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
317
+ </div>
318
+ </div>
319
+ <div>
320
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
321
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
322
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
328
+ <a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
329
+
330
+ </div>
331
+
332
+ </div>
333
+
334
+ <h2>Container Offset + Cards</h2>
335
+
336
+ <div uk-slider>
337
+
338
+ <div class="uk-position-relative uk-visible-toggle">
339
+
340
+ <div class="uk-slider-container uk-slider-container-offset" tabindex="-1">
341
+
342
+ <div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m uk-grid">
343
+ <div>
344
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
345
+ <h3 class="uk-card-title">Default</h3>
346
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
347
+ </div>
348
+ </div>
349
+ <div>
350
+ <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
351
+ <h3 class="uk-card-title">Primary</h3>
352
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
353
+ </div>
354
+ </div>
355
+ <div>
356
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
357
+ <h3 class="uk-card-title">Secondary</h3>
358
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
359
+ </div>
360
+ </div>
361
+ <div>
362
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
363
+ <h3 class="uk-card-title">Default</h3>
364
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
365
+ </div>
366
+ </div>
367
+ <div>
368
+ <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
369
+ <h3 class="uk-card-title">Primary</h3>
370
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
371
+ </div>
372
+ </div>
373
+ <div>
374
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
375
+ <h3 class="uk-card-title">Secondary</h3>
376
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
377
+ </div>
378
+ </div>
379
+ <div>
380
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
381
+ <h3 class="uk-card-title">Default</h3>
382
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
383
+ </div>
384
+ </div>
385
+ <div>
386
+ <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
387
+ <h3 class="uk-card-title">Primary</h3>
388
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
389
+ </div>
390
+ </div>
391
+ <div>
392
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
393
+ <h3 class="uk-card-title">Secondary</h3>
394
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ </div>
400
+
401
+ <a class="uk-position-center-left-out uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
402
+ <a class="uk-position-center-right-out uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
403
+
404
+ </div>
405
+
406
+ <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin uk-position-relative"></ul>
407
+
408
+ </div>
409
+
410
+ <h2>Parallax Control</h2>
411
+
412
+ <div uk-slider="parallax: true; parallax-start: 100%; parallax-end: 100%; clsActivated: uk-transition-active">
413
+
414
+ <div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m uk-light">
415
+ <div>
416
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
417
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
418
+ </div>
419
+ <div>
420
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
421
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
422
+ </div>
423
+ <div>
424
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
425
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
426
+ </div>
427
+ <div>
428
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
429
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
430
+ </div>
431
+ <div>
432
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
433
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
434
+ </div>
435
+ <div>
436
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
437
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
438
+ </div>
439
+ <div>
440
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
441
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
442
+ </div>
443
+ <div>
444
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
445
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
446
+ </div>
447
+ <div>
448
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
449
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
450
+ </div>
451
+ <div>
452
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
453
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
454
+ </div>
455
+ </div>
456
+
457
+ <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
458
+
459
+ </div>
460
+
461
+ <h2>Viewport Height + Parallax</h2>
462
+
463
+ </div>
464
+
465
+ <div class="uk-margin" uk-slider>
466
+
467
+ <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
468
+
469
+ <div class="uk-slider-items uk-grid-large uk-grid-match uk-grid" uk-height-viewport="min: 200">
470
+ <div class="uk-width-2-3">
471
+ <div class="uk-cover-container">
472
+ <img src="images/photo.jpg" alt="" uk-cover>
473
+ <div class="uk-position-center uk-position-medium uk-text-center">
474
+ <h1 class="uk-heading-xlarge" uk-slider-parallax="x: 200,-200">Heading</h1>
475
+ <p class="uk-h1" uk-slider-parallax="x: 400,-400">Lorem ipsum dolor sit amet.</p>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ <div class="uk-width-2-3">
480
+ <div class="uk-cover-container">
481
+ <img src="images/dark.jpg" alt="" uk-cover>
482
+ <div class="uk-position-center uk-position-medium uk-text-center">
483
+ <h1 class="uk-heading-xlarge" uk-slider-parallax="x: 200,-200">Heading</h1>
484
+ <p class="uk-h1" uk-slider-parallax="x: 400,-400">Lorem ipsum dolor sit amet.</p>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ <div class="uk-width-2-3">
489
+ <div class="uk-cover-container">
490
+ <img src="images/light.jpg" alt="" uk-cover>
491
+ <div class="uk-position-center uk-position-medium uk-text-center">
492
+ <h1 class="uk-heading-xlarge" uk-slider-parallax="y: -100,0,0; opacity: 1,1,0">Heading</h1>
493
+ <p class="uk-h1" uk-slider-parallax="y: 100,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ <div class="uk-width-2-3">
498
+ <div class="uk-cover-container">
499
+ <img src="images/photo2.jpg" alt="" uk-cover>
500
+ <div class="uk-position-center uk-position-medium uk-text-center">
501
+ <h1 class="uk-heading-xlarge" uk-slider-parallax="x: 200,-200">Heading</h1>
502
+ <p class="uk-h1" uk-slider-parallax="x: 400,-400">Lorem ipsum dolor sit amet.</p>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ <div class="uk-width-2-3">
507
+ <div class="uk-cover-container">
508
+ <img src="images/photo3.jpg" alt="" uk-cover>
509
+ <div class="uk-position-center uk-position-medium uk-text-center">
510
+ <h1 class="uk-heading-xlarge" uk-slider-parallax="x: 200,-200">Heading</h1>
511
+ <p class="uk-h1" uk-slider-parallax="x: 400,-400">Lorem ipsum dolor sit amet.</p>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <a class="uk-position-center-left uk-position-large uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
518
+ <a class="uk-position-center-right uk-position-large uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
519
+
520
+ </div>
521
+
522
+ <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
523
+
524
+ </div>
525
+
526
+ <div class="uk-container">
527
+
528
+ <h2>JavaScript Options</h2>
529
+
530
+ <div class="uk-overflow-auto">
531
+ <table class="uk-table uk-table-striped">
532
+ <thead>
533
+ <tr>
534
+ <th>Option</th>
535
+ <th>Value</th>
536
+ <th>Default</th>
537
+ <th>Description</th>
538
+ </tr>
539
+ </thead>
540
+ <tbody>
541
+ <tr>
542
+ <td><code>autoplay</code></td>
543
+ <td>Boolean</td>
544
+ <td>false</td>
545
+ <td>Starts autoplaying the slideshow.</td>
546
+ </tr>
547
+ <tr>
548
+ <td><code>autoplay-interval</code></td>
549
+ <td>Number</td>
550
+ <td>7000</td>
551
+ <td>The delay between switching slides in autoplay mode.</td>
552
+ </tr>
553
+ <tr>
554
+ <td><code>center</code></td>
555
+ <td>Boolean</td>
556
+ <td>false</td>
557
+ <td>Center the active slide.</td>
558
+ </tr>
559
+ <tr>
560
+ <td><code>draggable</code></td>
561
+ <td>Boolean</td>
562
+ <td>true</td>
563
+ <td>Enable pointer dragging.</td>
564
+ </tr>
565
+ <tr>
566
+ <td><code>finite</code></td>
567
+ <td>Boolean</td>
568
+ <td>false</td>
569
+ <td>Disable infinite sliding.</td>
570
+ </tr>
571
+ <tr>
572
+ <td><code>index</code></td>
573
+ <td>Number</td>
574
+ <td>0</td>
575
+ <td>Slider item to show. 0 based index.</td>
576
+ </tr>
577
+ <tr>
578
+ <td><code>active</code></td>
579
+ <td>String</td>
580
+ <td>all</td>
581
+ <td>Slider item/items to apply the transition active class to (all|first).</td>
582
+ </tr>
583
+ <tr>
584
+ <td><code>pause-on-hover</code></td>
585
+ <td>Boolean</td>
586
+ <td>true</td>
587
+ <td>Pause autoplay mode on hover.</td>
588
+ </tr>
589
+ <tr>
590
+ <td><code>sets</code></td>
591
+ <td>Boolean</td>
592
+ <td>false</td>
593
+ <td>Slide in sets.</td>
594
+ </tr>
595
+ <tr>
596
+ <td><code>velocity</code></td>
597
+ <td>Number</td>
598
+ <td>1</td>
599
+ <td>The animation velocity (pixel/ms).</td>
600
+ </tr>
601
+ <tr>
602
+ <td><code>i18n</code></td>
603
+ <td>Object</td>
604
+ <td>null</td>
605
+ <td>Override default translation texts.</td>
606
+ </tr>
607
+ </tbody>
608
+ </table>
609
+ </div>
610
+
611
+ <h2>i18n</h2>
612
+
613
+ <div class="uk-overflow-auto">
614
+ <table class="uk-table uk-table-striped">
615
+ <thead>
616
+ <tr>
617
+ <th>Key</th>
618
+ <th>Default</th>
619
+ <th>Description</th>
620
+ </tr>
621
+ </thead>
622
+ <tbody>
623
+ <tr>
624
+ <td><code>next</code></td>
625
+ <td>Next slide</td>
626
+ <td><code>aria-label</code> for next slide button.</td>
627
+ </tr>
628
+ <tr>
629
+ <td><code>previous</code></td>
630
+ <td>Previous slide</td>
631
+ <td><code>aria-label</code> for previous slide button.</td>
632
+ </tr>
633
+ <tr>
634
+ <td><code>slideX</code></td>
635
+ <td>Slide %s</td>
636
+ <td><code>aria-label</code> for pagination slide button.</td>
637
+ </tr>
638
+ <tr>
639
+ <td><code>slideLabel</code></td>
640
+ <td>%s of %s</td>
641
+ <td><code>aria-label</code> for slide.</td>
642
+ </tr>
643
+ </tbody>
644
+ </table>
645
+ </div>
646
+
647
+ </div>
648
+
649
+ <script>
650
+
651
+ const {attr, $$, on} = UIkit.util;
652
+ for (const attribute of ['finite', 'center', 'sets', 'active']) {
653
+ on(`#js-${attribute}-switcher`, 'change', e =>
654
+ attr($$('[uk-slider]'), attribute, e.target.value)
655
+ );
656
+ }
657
+
658
+ </script>
659
+
660
+ </body>
661
+ </html>