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>
We need 50% image width to be less than height
</p>
<div class="uk-slidenav-position" data-uk-slideshow="{autoplay:true, height: 300}">

  <ul class="uk-slideshow">
    <li><img src="http://unsplash.it/300/200" style="heigth:100%"></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> <!-- 50% of 1000 not less than 350 -->
    <li><img src="http://unsplash.it/300/890"></li> 
  </ul>

  <div data-uk-slideset="{default: 4}" class="uk-margin-top">
    <div class="uk-slidenav-position">
      <ul class="uk-grid uk-slideset">
        <li data-uk-slideshow-item="0">
            <a href="#"><img src="http://unsplash.it/300/200"></a>
        </li>
        <li data-uk-slideshow-item="1">
            <a href="#"><img src="http://unsplash.it/400/600"></a>
        </li>
        <li data-uk-slideshow-item="2">
            <a href="#"><img src="http://unsplash.it/600/400"></a>
        </li>
        <li data-uk-slideshow-item="3">
            <a href="#"><img src="http://unsplash.it/450/450"></a>
        </li>
        <li data-uk-slideshow-item="4">
            <a href="#"><img...

CSS

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

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