Build with UIkit 3.17.4 in Slideshow, update October 22, 2023
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<div class="uk-section uk-section-primary uk-section-xlarge">
<div class="uk-container">
<div class="uk-flex-middle" uk-grid>
<div class="uk-width-2-3">
<div class="intro-slider" uk-slideshow>
<ul class="uk-slideshow-items">
<li class="slide-people">
<img src="https://images.unsplash.com/photo-1505136022555-39704db312fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="" uk-cover>
</li>
<li class="slide-architecture">
<img src="https://images.unsplash.com/photo-1493397212122-2b85dda8106b?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="" uk-cover>
</li>
<li class="slide-nature">
<img src="https://images.unsplash.com/photo-1453785675141-67637e2d4b5c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="" uk-cover>
</li>
<li class="slide-people">
<img src="https://images.unsplash.com/photo-1455504490126-80ed4d83b3b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="" uk-cover>
</li>
<li class="slide-architecture">
<img src="https://images.unsplash.com/photo-1483366774565-c783b9f70e2c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="" uk-cover>
</li>
<li class="slide-nature">
<img src="https://images.unsplash.com/photo-1546076029-0783067e849f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="" uk-cover>
</li>
<li class="slide-people">
<img src="https://images.unsplash.com/photo-1476360806206-b2f7af3fbda4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="" uk-cover>
</li>
<li class="slide-architecture">
<img src="https://images.unsplash.com/photo-1545253806-fe04593d1a3f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="" uk-cover>
</li>
<li class="slide-nature">
<img src="https://images.unsplash.com/photo-1548176584-83688b1f50c8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="" uk-cover>
</li>
</ul>
</div>
</div>
<div class="uk-width-1-3">
<h1>Filter a Slideshow</h1>
<p>This is a code example on how to filter a slideshow.</p>
<ul class="uk-nav uk-nav-primary" uk-slideshow-filter=".intro-slider">
<li class="uk-active">
<a href="">All</a>
</li>
<li>
<a href="" data-filter=".slide-people">People</a>
</li>
<li>
<a href="" data-filter=".slide-architecture">Architecture</a>
</li>
<li>
<a href="" data-filter=".slide-nature">Nature</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- CSS -->
var _ = UIkit.util;
function next(elm, selector) {
elm = _.$(elm).nextElementSibling;
if (selector) {
while (elm) {
if (elm.matches(selector)) break;
elm = _.$(elm).nextElementSibling;
}
}
return elm;
}
_.$$('[uk-slideshow-filter]').forEach(function(e) {
var interval = 3000;
var slider = _.$(_.attr(e, 'uk-slideshow-filter'));
var filter = false;
var timeout = false;
var waiting = true;
var getFindIndex = function() {
var list = _.$$('> ul > li', slider);
var active = next(_.$('> ul > li.uk-active', slider), filter);
if (!active) active = _.$(filter, slider);
return _.index(list, active);
}
var goToNextIndex = function() {
if (timeout) clearTimeout(timeout);
UIkit.slideshow(slider).show(find ? getFindIndex() : 'next');
waiting = true;
}
UIkit.slideshow(slider, {
animation: 'fade',
draggable: true
});
_.on(_.$$('> li > a', e), 'click', function(a) {
a.preventDefault();
var el = a.target;
_.$$('> li', e).forEach(function(i) {
_.removeClass(i, 'uk-active');
});
_.addClass(el.parentNode, 'uk-active');
filter = _.data(el, 'filter');
goToNextIndex();
});
_.on(slider, 'itemshown', function() {
if (waiting) {
waiting = false;
timeout = setTimeout(function() {
goToNextIndex();
}, interval);
}
});
});