mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
478 lines
24 KiB
478 lines
24 KiB
<!DOCTYPE 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 type="text/css">
|
|
|
|
.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">
|
|
<option value="0">Not centered</option>
|
|
<option value="1">Center</option>
|
|
</select>
|
|
<select id="js-finite-switcher" class="uk-select uk-form-width-small">
|
|
<option value="0">Infinite</option>
|
|
<option value="1">Finite</option>
|
|
</select>
|
|
<select id="js-sets-switcher" class="uk-select uk-form-width-small">
|
|
<option value="0">Single</option>
|
|
<option value="1">Sets</option>
|
|
</select>
|
|
</div>
|
|
|
|
<h2>Content Widths</h2>
|
|
|
|
<div uk-slider>
|
|
|
|
<div class="uk-position-relative">
|
|
|
|
<div class="uk-slider-container uk-light">
|
|
<ul class="test uk-slider-items">
|
|
<li>
|
|
<canvas width="320" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>1</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="320" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>2</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="320" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>3</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="320" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>4</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="320" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>5</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="320" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>6</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="320" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>7</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="320" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>8</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="320" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>9</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="320" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>10</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="320" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>11</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="320" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>12</h1></div>
|
|
</li>
|
|
</ul>
|
|
</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">
|
|
|
|
<ul class="test uk-slider-items">
|
|
<li>
|
|
<canvas width="400" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>1</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="240" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>2</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="480" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>3</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="300" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>4</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="400" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>5</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="240" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>6</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="480" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>7</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="300" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>8</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="400" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>9</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="240" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>10</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="480" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>11</h1></div>
|
|
</li>
|
|
<li>
|
|
<canvas width="300" height="200"></canvas>
|
|
<div class="uk-position-center uk-panel"><h1>12</h1></div>
|
|
</li>
|
|
</ul>
|
|
|
|
<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">
|
|
|
|
<ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m">
|
|
<li>
|
|
<img src="images/slider1.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
|
|
</li>
|
|
<li>
|
|
<img src="images/slider2.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
|
|
</li>
|
|
<li>
|
|
<img src="images/slider3.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
|
|
</li>
|
|
<li>
|
|
<img src="images/slider4.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
|
|
</li>
|
|
<li>
|
|
<img src="images/slider5.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
|
|
</li>
|
|
<li>
|
|
<img src="images/slider1.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
|
|
</li>
|
|
<li>
|
|
<img src="images/slider2.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
|
|
</li>
|
|
<li>
|
|
<img src="images/slider3.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
|
|
</li>
|
|
<li>
|
|
<img src="images/slider4.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
|
|
</li>
|
|
<li>
|
|
<img src="images/slider5.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
|
|
</li>
|
|
</ul>
|
|
|
|
<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">
|
|
|
|
<ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m uk-grid">
|
|
<li>
|
|
<div class="uk-panel uk-transition-toggle">
|
|
<img src="images/slider1.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="uk-panel uk-transition-toggle">
|
|
<img src="images/slider2.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="uk-panel uk-transition-toggle">
|
|
<img src="images/slider3.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="uk-panel uk-transition-toggle">
|
|
<img src="images/slider4.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="uk-panel uk-transition-toggle">
|
|
<img src="images/slider5.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="uk-panel uk-transition-toggle">
|
|
<img src="images/slider1.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="uk-panel uk-transition-toggle">
|
|
<img src="images/slider2.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="uk-panel uk-transition-toggle">
|
|
<img src="images/slider3.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="uk-panel uk-transition-toggle">
|
|
<img src="images/slider4.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="uk-panel uk-transition-toggle">
|
|
<img src="images/slider5.jpg" alt="">
|
|
<div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<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>Viewport Height + Parallax</h2>
|
|
|
|
</div>
|
|
|
|
<div class="uk-margin" uk-slider>
|
|
|
|
<div class="uk-position-relative uk-visible-toggle uk-light">
|
|
|
|
<ul class="uk-slider-items uk-grid-large uk-grid-match uk-grid" uk-height-viewport="min-height: 200">
|
|
<li 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-hero" 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>
|
|
</li>
|
|
<li 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-hero" 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>
|
|
</li>
|
|
<li 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-hero" 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>
|
|
</li>
|
|
<li 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-hero" 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>
|
|
</li>
|
|
<li 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-hero" 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>
|
|
</li>
|
|
</ul>
|
|
|
|
<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">
|
|
|
|
<h3>JavaScript Options</h3>
|
|
|
|
<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>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>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>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
['finite', 'center', 'sets'].forEach(function(attr) {
|
|
UIkit.util.on('#js-'+attr+'-switcher', 'change', function () {
|
|
var value = this.value;
|
|
UIkit.util.$$('[uk-slider]').forEach(function (slider) { UIkit.util.attr(slider, attr, value); });
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|