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