1. Home
  2. /
  3. Uikit
  4. /
  5. Slideshow Example

Slideshow Example - Uikit Typing CST Test

Loading…

Slideshow Example — Uikit Code

Shows a responsive image slideshow using UIkit slideshow classes.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
	<title>UIkit Slideshow</title>
</head>
<body class="uk-container uk-margin-top">
	<div uk-slideshow="animation: push">
		<ul class="uk-slideshow-items">
		<li><img src="https://via.placeholder.com/600x300" alt=""></li>
		<li><img src="https://via.placeholder.com/600x300" alt=""></li>
		<li><img src="https://via.placeholder.com/600x300" alt=""></li>
		</ul>
		<a class="uk-position-center-left uk-position-small uk-slidenav-large" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
		<a class="uk-position-center-right uk-position-small uk-slidenav-large" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Uikit Language Guide

UIkit is a lightweight, modular front-end framework for developing fast and powerful web interfaces. It offers a responsive grid, prebuilt components, and JavaScript plugins to create interactive UI elements.

Primary Use Cases

  • ▸Responsive websites and web apps
  • ▸Landing pages and marketing sites
  • ▸Admin dashboards
  • ▸Rapid prototyping
  • ▸Projects needing modular JS components

Notable Features

  • ▸12-column responsive grid system
  • ▸Modular CSS and JS components
  • ▸Prebuilt UI elements (buttons, forms, modals, sliders)
  • ▸JavaScript plugins for interactivity
  • ▸Sass/Less support for theming and customization

Origin & Creator

Created by YOOtheme in 2013 as a modern, modular framework for web interfaces.

Industrial Note

UIkit is often used in web apps, marketing sites, and lightweight dashboards where a modular, customizable, and responsive framework is desired.

More Uikit Typing Exercises

UIkit Counter ExampleUIkit Navbar ExampleUIkit Card ExampleUIkit Modal ExampleUIkit Tab ExampleUIkit Accordion ExampleUIkit Tooltip ExampleUIkit Progress Bar Example

Practice Other Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypher