uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
662 lines (585 loc) • 35.3 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slider - UIkit tests</title>
<script src="js/test.js"></script>
<style>
.test > :nth-child(10n-9) > canvas { background: rgba(0,0,0,0.1); }
.test > :nth-child(10n-8) > canvas { background: rgba(0,0,0,0.15); }
.test > :nth-child(10n-7) > canvas { background: rgba(0,0,0,0.2); }
.test > :nth-child(10n-6) > canvas { background: rgba(0,0,0,0.25); }
.test > :nth-child(10n-5) > canvas { background: rgba(0,0,0,0.3); }
.test > :nth-child(10n-4) > canvas { background: rgba(0,0,0,0.35); }
.test > :nth-child(10n-3) > canvas { background: rgba(0,0,0,0.40); }
.test > :nth-child(10n-2) > canvas { background: rgba(0,0,0,0.45); }
.test > :nth-child(10n-1) > canvas { background: rgba(0,0,0,0.50); }
.test > :nth-child(10n) > canvas { background: rgba(0,0,0,0.55); }
</style>
</head>
<body>
<div class="uk-container">
<h1>Slider</h1>
<div class="uk-margin">
<select id="js-center-switcher" class="uk-select uk-form-width-small" aria-label="Center switcher">
<option value="0">Not centered</option>
<option value="1">Center</option>
</select>
<select id="js-finite-switcher" class="uk-select uk-form-width-small" aria-label="Finite switcher">
<option value="0">Infinite</option>
<option value="1">Finite</option>
</select>
<select id="js-sets-switcher" class="uk-select uk-form-width-small" aria-label="Sets switcher">
<option value="0">Single</option>
<option value="1">Sets</option>
</select>
<select id="js-active-switcher" class="uk-select uk-form-width-small" aria-label="Active switcher">
<option value="">All</option>
<option value="first">First</option>
</select>
</div>
<h2>Content Widths</h2>
<div uk-slider>
<div class="uk-position-relative">
<div class="uk-slider-container uk-light">
<div class="test uk-slider-items">
<div>
<canvas width="320" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>1</h1></div>
</div>
<div>
<canvas width="320" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>2</h1></div>
</div>
<div>
<canvas width="320" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>3</h1></div>
</div>
<div>
<canvas width="320" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>4</h1></div>
</div>
<div>
<canvas width="320" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>5</h1></div>
</div>
<div>
<canvas width="320" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>6</h1></div>
</div>
<div>
<canvas width="320" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>7</h1></div>
</div>
<div>
<canvas width="320" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>8</h1></div>
</div>
<div>
<canvas width="320" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>9</h1></div>
</div>
<div>
<canvas width="320" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>10</h1></div>
</div>
<div>
<canvas width="320" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>11</h1></div>
</div>
<div>
<canvas width="320" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>12</h1></div>
</div>
</div>
</div>
<div class="uk-hidden@xl uk-light">
<a class="uk-position-center-left uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
</div>
<div class="uk-visible@xl">
<a class="uk-position-center-left-out uk-position-small" href uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right-out uk-position-small" href uk-slidenav-next uk-slider-item="next"></a>
</div>
<!-- Alternative markup
<div class="uk-visible@s uk-dark" uk-toggle="cls: uk-dark uk-light; mode: media; media: @xl">
<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>
<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>
</div>
-->
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
<h3>Different Widths</h3>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
<div class="test uk-slider-items">
<div>
<canvas width="400" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>1</h1></div>
</div>
<div>
<canvas width="240" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>2</h1></div>
</div>
<div>
<canvas width="480" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>3</h1></div>
</div>
<div>
<canvas width="300" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>4</h1></div>
</div>
<div>
<canvas width="400" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>5</h1></div>
</div>
<div>
<canvas width="240" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>6</h1></div>
</div>
<div>
<canvas width="480" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>7</h1></div>
</div>
<div>
<canvas width="300" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>8</h1></div>
</div>
<div>
<canvas width="400" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>9</h1></div>
</div>
<div>
<canvas width="240" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>10</h1></div>
</div>
<div>
<canvas width="480" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>11</h1></div>
</div>
<div>
<canvas width="300" height="200"></canvas>
<div class="uk-position-center uk-panel"><h1>12</h1></div>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
<h2>Width Classes + Toggle on active</h2>
<div uk-slider="clsActivated: uk-transition-active">
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
<div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m">
<div>
<img src="images/slider1.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
</div>
<div>
<img src="images/slider2.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
</div>
<div>
<img src="images/slider3.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
</div>
<div>
<img src="images/slider4.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
</div>
<div>
<img src="images/slider5.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
</div>
<div>
<img src="images/slider1.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
</div>
<div>
<img src="images/slider2.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
</div>
<div>
<img src="images/slider3.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
</div>
<div>
<img src="images/slider4.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
</div>
<div>
<img src="images/slider5.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
<h2>Grid + Toggle on hover</h2>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
<div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m uk-grid">
<div>
<div class="uk-panel uk-transition-toggle" tabindex="0">
<img src="images/slider1.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
</div>
</div>
<div>
<div class="uk-panel uk-transition-toggle" tabindex="0">
<img src="images/slider2.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
</div>
</div>
<div>
<div class="uk-panel uk-transition-toggle" tabindex="0">
<img src="images/slider3.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
</div>
</div>
<div>
<div class="uk-panel uk-transition-toggle" tabindex="0">
<img src="images/slider4.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
</div>
</div>
<div>
<div class="uk-panel uk-transition-toggle" tabindex="0">
<img src="images/slider5.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
</div>
</div>
<div>
<div class="uk-panel uk-transition-toggle" tabindex="0">
<img src="images/slider1.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
</div>
</div>
<div>
<div class="uk-panel uk-transition-toggle" tabindex="0">
<img src="images/slider2.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
</div>
</div>
<div>
<div class="uk-panel uk-transition-toggle" tabindex="0">
<img src="images/slider3.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
</div>
</div>
<div>
<div class="uk-panel uk-transition-toggle" tabindex="0">
<img src="images/slider4.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
</div>
</div>
<div>
<div class="uk-panel uk-transition-toggle" tabindex="0">
<img src="images/slider5.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
</div>
</div>
</div>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>
<h2>Container Offset + Cards</h2>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle">
<div class="uk-slider-container uk-slider-container-offset" tabindex="-1">
<div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m uk-grid">
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Secondary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Secondary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-primary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
<h3 class="uk-card-title">Secondary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
</div>
</div>
</div>
<a class="uk-position-center-left-out uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right-out uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin uk-position-relative"></ul>
</div>
<h2>Parallax Control</h2>
<div uk-slider="parallax: true; parallax-start: 100%; parallax-end: 100%; clsActivated: uk-transition-active">
<div class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m uk-light">
<div>
<img src="images/slider1.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
</div>
<div>
<img src="images/slider2.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
</div>
<div>
<img src="images/slider3.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
</div>
<div>
<img src="images/slider4.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
</div>
<div>
<img src="images/slider5.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
</div>
<div>
<img src="images/slider1.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
</div>
<div>
<img src="images/slider2.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
</div>
<div>
<img src="images/slider3.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
</div>
<div>
<img src="images/slider4.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
</div>
<div>
<img src="images/slider5.jpg" width="400" height="600" alt="">
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
</div>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
<h2>Viewport Height + Parallax</h2>
</div>
<div class="uk-margin" uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
<div class="uk-slider-items uk-grid-large uk-grid-match uk-grid" uk-height-viewport="min: 200">
<div class="uk-width-2-3">
<div class="uk-cover-container">
<img src="images/photo.jpg" alt="" uk-cover>
<div class="uk-position-center uk-position-medium uk-text-center">
<h1 class="uk-heading-xlarge" uk-slider-parallax="x: 200,-200">Heading</h1>
<p class="uk-h1" uk-slider-parallax="x: 400,-400">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="uk-width-2-3">
<div class="uk-cover-container">
<img src="images/dark.jpg" alt="" uk-cover>
<div class="uk-position-center uk-position-medium uk-text-center">
<h1 class="uk-heading-xlarge" uk-slider-parallax="x: 200,-200">Heading</h1>
<p class="uk-h1" uk-slider-parallax="x: 400,-400">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="uk-width-2-3">
<div class="uk-cover-container">
<img src="images/light.jpg" alt="" uk-cover>
<div class="uk-position-center uk-position-medium uk-text-center">
<h1 class="uk-heading-xlarge" uk-slider-parallax="y: -100,0,0; opacity: 1,1,0">Heading</h1>
<p class="uk-h1" uk-slider-parallax="y: 100,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="uk-width-2-3">
<div class="uk-cover-container">
<img src="images/photo2.jpg" alt="" uk-cover>
<div class="uk-position-center uk-position-medium uk-text-center">
<h1 class="uk-heading-xlarge" uk-slider-parallax="x: 200,-200">Heading</h1>
<p class="uk-h1" uk-slider-parallax="x: 400,-400">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="uk-width-2-3">
<div class="uk-cover-container">
<img src="images/photo3.jpg" alt="" uk-cover>
<div class="uk-position-center uk-position-medium uk-text-center">
<h1 class="uk-heading-xlarge" uk-slider-parallax="x: 200,-200">Heading</h1>
<p class="uk-h1" uk-slider-parallax="x: 400,-400">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
<a class="uk-position-center-left uk-position-large uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-large uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
<div class="uk-container">
<h2>JavaScript Options</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>autoplay</code></td>
<td>Boolean</td>
<td>false</td>
<td>Starts autoplaying the slideshow.</td>
</tr>
<tr>
<td><code>autoplay-interval</code></td>
<td>Number</td>
<td>7000</td>
<td>The delay between switching slides in autoplay mode.</td>
</tr>
<tr>
<td><code>center</code></td>
<td>Boolean</td>
<td>false</td>
<td>Center the active slide.</td>
</tr>
<tr>
<td><code>draggable</code></td>
<td>Boolean</td>
<td>true</td>
<td>Enable pointer dragging.</td>
</tr>
<tr>
<td><code>finite</code></td>
<td>Boolean</td>
<td>false</td>
<td>Disable infinite sliding.</td>
</tr>
<tr>
<td><code>index</code></td>
<td>Number</td>
<td>0</td>
<td>Slider item to show. 0 based index.</td>
</tr>
<tr>
<td><code>active</code></td>
<td>String</td>
<td>all</td>
<td>Slider item/items to apply the transition active class to (all|first).</td>
</tr>
<tr>
<td><code>pause-on-hover</code></td>
<td>Boolean</td>
<td>true</td>
<td>Pause autoplay mode on hover.</td>
</tr>
<tr>
<td><code>sets</code></td>
<td>Boolean</td>
<td>false</td>
<td>Slide in sets.</td>
</tr>
<tr>
<td><code>velocity</code></td>
<td>Number</td>
<td>1</td>
<td>The animation velocity (pixel/ms).</td>
</tr>
<tr>
<td><code>i18n</code></td>
<td>Object</td>
<td>null</td>
<td>Override default translation texts.</td>
</tr>
</tbody>
</table>
</div>
<h2>i18n</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Key</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>next</code></td>
<td>Next slide</td>
<td><code>aria-label</code> for next slide button.</td>
</tr>
<tr>
<td><code>previous</code></td>
<td>Previous slide</td>
<td><code>aria-label</code> for previous slide button.</td>
</tr>
<tr>
<td><code>slideX</code></td>
<td>Slide %s</td>
<td><code>aria-label</code> for pagination slide button.</td>
</tr>
<tr>
<td><code>slideLabel</code></td>
<td>%s of %s</td>
<td><code>aria-label</code> for slide.</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
const {attr, $$, on} = UIkit.util;
for (const attribute of ['finite', 'center', 'sets', 'active']) {
on(`#js-${attribute}-switcher`, 'change', e =>
attr($$('[uk-slider]'), attribute, e.target.value)
);
}
</script>
</body>
</html>