Responsive slideshow with thumbnav slider

This function extends the UIKit’s slideshow with thumbnav in slider component. The variable “responsiveNum” defines how many slides per set when the slideshow switches. For example, if responsiveNum is 5, the thumbnav slider will slide to index 6 when the slideshow switch to the sixth slides. The sample code of integrating slideshow and thumbnav is HERE.

Thumbnail

PugSCSSJS
.uk-position-relative.slideshowWithThumbnav(uk-slideshow="animation: fade;finite:true")
  each i in frontPage
    .uk-position-relative
      ul.uk-slideshow-items.uk-margin-top
        each j in i.video
          li
            a.uk-display-block.uk-background-cover.uk-position-relative.background-gradient.link-video(data-src=j.src style='padding-top: calc(704 / 1244 * 100%)' href=j.href uk-img)
              span.uk-position-center
                svg(xmlns="http://www.w3.org/2000/svg" width="147" height="147")
                  g(data-name="Group 2043" transform="translate(-887 -5791)")
                    circle(data-name="Ellipse 1" cx="73.5" cy="73.5" r="73.5" transform="translate(887 5791)" fill="#fff" opacity=".251")
                    g(data-name="Ellipse 1 copy" transform="translate(887 5791)" fill="rgba(255,255,255,0)" stroke="rgba(255,255,255,0.65)" stroke-linejoin="round" stroke-width="3")
                      circle(cx="73.5" cy="73.5" r="73.5" stroke="none")
                      circle(cx="73.5" cy="73.5" r="72" fill="none")
                    path(data-name="Shape 11" d="M984.64 5864.508l-37.643-21.511v43.016l37.64-21.508" fill="#fff")
              .uk-position-bottom-left(style='z-index:5')
                .uk-padding-large-s.uk-padding-default.uk-padding-bottom
                  span.uk-padding-small-right.text-default-xl.text-small.text-white.uk-position-relative(style='background-color: red;padding-left:20px;')=j.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;')=j.title
      a.uk-position-center-left.uk-position-small(href="#" uk-slidenav-previous="" uk-slideshow-item="previous" style='padding: 12px 17px;' class='uk-visible@s')
      a.uk-position-center-right.uk-position-small(href="#" uk-slidenav-next="" uk-slideshow-item="next" style='padding: 12px 17px;' class='uk-visible@s')
      ul.uk-slideshow-nav.uk-dotnav.uk-flex-center.uk-position-relative(class='uk-hidden@s' style='margin-top: -25px; z-index: 10;')
      p(class='uk-hidden@s')  
    // ThumbnavSlider
    div(style='margin-top:15px')
      .uk-position-relative.uk-visible-toggle.thumbnavSlider(tabindex="-1" uk-slider="finite:true")
        ul.uk-slider-items.uk-grid-small.thumbnav-video(uk-grid class='uk-child-width-1-5@l uk-child-width-1-3@m uk-child-width-1-2')
          each k,index in i.video
            li(uk-slideshow-item=index)
              a.uk-background-cover.uk-position-relative.uk-display-block(href='#' data-src=k.src uk-img style='padding-top: calc(135 / 241 * 100%)')
                h3.uk-position-bottom-center.text-small.text-white=k.title
                span.uk-position-center
                  svg(xmlns="http://www.w3.org/2000/svg" width="147" height="147")
                    g(data-name="Group 2043" transform="translate(-887 -5791)")
                      circle(data-name="Ellipse 1" cx="73.5" cy="73.5" r="73.5" transform="translate(887 5791)" fill="#fff" opacity=".251")
                      g(data-name="Ellipse 1 copy" transform="translate(887 5791)" fill="rgba(255,255,255,0)" stroke="rgba(255,255,255,0.65)" stroke-linejoin="round" stroke-width="3")
                        circle(cx="73.5" cy="73.5" r="73.5" stroke="none")
                        circle(cx="73.5" cy="73.5" r="72" fill="none")
                      path(data-name="Shape 11" d="M984.64 5864.508l-37.643-21.511v43.016l37.64-21.508" fill="#fff")
.thumbnav-video {
  li {
    position: relative;
    a {
      width:100%; 
      position: relative;
      h3 {
        position: relative;
        width: 100%;
        padding: 10px;
        &:after {
          content: '';
          @include pos-a('','',0,0,100%,100px,-1);
          background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0) 78%);
        }
      }
      span {
        transform: translate(-50%, -60%) scale(.25);
        path {
          transition: all .2s ease;
        }
      }
      &:hover {
        span {
          path {
            fill: $global-secondary-background;
          }
        }
      }
      &:after {
        content: '';
        @include pos-a(0,'','',0,100%,100%,5);
        border: 5px solid $global-secondary-background;
        transition: opacity .4s ease;
        opacity: 0;
      }
    }
    &.uk-active {
      a {
        &:after {
          opacity: 1;
        }
      }
    }
  }
}
/**
 * Slideshow with thumbnav slider
 */

let responsiveNum;  // The number that thumbNav slides to a next or previous set.

(window.matchMedia("(min-width:1200px)").matches) ? responsiveNum = 5: '';
(window.matchMedia("(min-width:640px) and (max-width:1200px)").matches) ? responsiveNum = 3 : '';
(window.matchMedia("(max-width:640px)").matches) ? responsiveNum = 2 : '';

Array.from(document.querySelectorAll('.slideshowWithThumbnav')).forEach(element=>{
  element.addEventListener('itemshow',e=>{
    let index = UIkit.getComponent(e.currentTarget, 'slideshow').index
    let direction = UIkit.getComponent(e.currentTarget, 'slideshow').dir
    let slideshowNum = element.querySelectorAll('ul.uk-slideshow-items li').length
    for (let i = 1; i <= Math.floor(slideshowNum / responsiveNum); i++) {
      if (direction === 1 ){
        if (index === responsiveNum*i){
          UIkit.slider(e.currentTarget.querySelector('.thumbnavSlider')).show(responsiveNum*i);
        }
      } else if (direction === -1) {
        if (index === (responsiveNum * i)-1) {
          UIkit.slider(e.currentTarget.querySelector('.thumbnavSlider')).show((responsiveNum * i) - responsiveNum);
        }
      }
    }
  })
})