Slideshow with circle navigation

Thumbnail

PugSCSSJS

div(class='[email protected] [email protected]')
  #frontPageSlider(uk-slideshow="animation: fade; ratio: 1.24:1")
    .uk-position-relative.uk-visible-toggle.uk-light(tabindex="-1")
      ul.uk-slideshow-items
        each k in i.slider
          li
            a.uk-display-block.uk-background-cover.uk-position-relative.background-gradient(data-src=k.src style='padding-top: calc(620 / 770 * 100%)' href=k.href uk-img)
              .uk-position-bottom-left(style='bottom: 30px; z-index:5')
                .uk-padding-default
                  span.uk-padding-small-right.text-default-xl.text-small.text-white.uk-position-relative(style='background-color: red;padding-left:20px;')=k.text
                    span.uk-position-center-right(style='right:-10px;width:20px;height:100%;background-color: red; transform: translateY(-50%) skewX(-20deg);z-index:-1;')
                  p.heading-default-xl.heading-xsmall-l.heading-xxsmall.text-white(style='padding-top:11px;')=k.title
      a.uk-position-center-left.uk-position-small(href="#" uk-slidenav-previous="" uk-slideshow-item="previous" style='padding: 12px 17px;')
      a.uk-position-center-right.uk-position-small(href="#" uk-slidenav-next="" uk-slideshow-item="next" style='padding: 12px 17px;')
      ul.uk-slideshow-nav.uk-dotnav.uk-flex-center.uk-position-relative(style='margin-top: -30px; z-index: 10;')

.uk-dotnav>*>* {
  background: #fff;
  border: 1px solid #fff;
}

.uk-dotnav>.uk-active>*, .uk-dotnav>*:hover>* {
  background-color:$global-secondary-background;
}
.uk-dotnav>.uk-active>*{
  border: 1px solid $global-secondary-background;
}

.uk-slidenav {
  position: relative;
  &:before {
    content:'';
    @include pos-a(0,'','',0,100%,100%,-1);
    border-radius: 100%;
    background: #000;
    transition: all .2s ease;
  }
  svg {
    color: $global-secondary-background;
    transition: all .2s ease;
  }
  &:hover {
    &:before {
      background: rgba(255, 228, 0,.55);
    }
    svg {
      color: #fff;
    }
  }
}

#frontPageSlider {
  .uk-slidenav {
    svg {
      transform: translate(0, 0) scale(.7);
      polyline {
        stroke-width: 1.8px;
      }
    }
  }
}

/**
 * Scroll Indicator
 */

window.onscroll = function () { scrollIndicatior() };

function scrollIndicatior() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  Array.from(vars.scrollIndicator).forEach(element=>{
    element.style.width = scrolled + "%";
  })
}