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); } } } }) })