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>
<p>
    OR with thumbs
</p>


<div class="uk-container-center uk-slidenav-position " data-uk-slideshow="{autoplay:true, height: 500, kenburns: true}">

    <ul class="uk-slideshow">
        <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/800/500"></li>
        <li><img src="http://unsplash.it/300/900"></li>
    </ul>


    <div data-uk-slideset="{small: 2, medium: 4, large: 6}" class="uk-margin-top">
        <div class="uk-slidenav-position">
            <ul class="uk-grid uk-slideset">
                <li data-uk-slideshow-item="0">
                    <a href="#" style="background-image: url(http://unsplash.it/300/200)"><img class="uk-invisible" src="http://unsplash.it/300/200"></a>
                </li>
                <li data-uk-slideshow-item="1">
                    <a href="#" style="background-image: url(http://unsplash.it/400/600)"><img class="uk-invisible" src="http://unsplash.it/400/600"></a>
                </li>
                <li data-uk-slideshow-item="2">
                    <a href="#"...

CSS

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

.uk-slideset li a {
    position: relative;
  width: 100%;
  overflow: hidden;
  background-color: red;
  background-size: cover;
  background-position: center;
display: block
}

.uk-slideset li a:after {
    content: "";
  display: block;
  padding-top: 100%;
}

.uk-slideset img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

}

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'
    }]
]