UIkit 3 Slideshow with Filter

<!-- 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);
		}
	});

});