UIKIT Slideshow with THUMB

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/css/uikit.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/css/components/slideshow.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/js/components/slideshow.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/css/components/slidenav.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/css/components/dotnav.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/js/components/slideset.min.js"></script>
<div class="uk-container-center uk-slidenav-position " data-uk-slideshow="{autoplay:true, height: 500, kenburns: true, animation: 'fade', duration: 300}">

    <ul class="uk-slideshow uk-slideshow-fullscreen">
        <li><img src="http://unsplash.it/300/200"></li>
        <li><img src="http://unsplash.it/400/600"></li>
        <li><img src="http://unsplash.it/600/400"></li>
        <li><img src="http://unsplash.it/450/450"></li>
        <li><img src="http://unsplash.it/1000/350"></li>
        <li><img src="http://unsplash.it/300/890"></li>
    </ul>

    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>

    <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
        <li data-uk-slideshow-item="0">
            <a href=""></a>
        </li>
        <li data-uk-slideshow-item="1">
            <a href=""></a>
        </li>
        <li data-uk-slideshow-item="2">
            <a href=""></a>
        </li>
        <li data-uk-slideshow-item="3">
            <a href=""></a>
        </li>
        <li data-uk-slideshow-item="4">
            <a...

CSS

.uk-slidenav-position {
    max-width: 640px;
}

.uk-slideset li a {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding-top: 50%;
    /* 50% of width */
}

.uk-slideset img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    /*height: 100% won't crop*/
}

JavaScript

let slideshowGallery = [
    options: {
        width: '640px'
        height: '500px',
        autoPlay: true,
        pauseOnHover: false,
        autoPLayInterval: 5000,
        transition: 'fade',
        transitionDuration: 300,
        lightbox: 'mygroup',
        showNavigation: 'Dots', /* or thumbs*/
        thumbsNumber: {
            smallScreen: 3,
            mediumScreen: 4,
            largeScreen: 6
        },
        showPrevNextButton: true /* applicable if showNavigation : thumbs*/
    },
    images: [{
        src: '../images/12.png'
    }, {
        src: '../images/10.png'
    }, {
        src: '../images/13.png'
    }, {
        src: '../images/11.png'
    }]
]