Slick Carousel is used for this component.
This slideshow is comprised of two implementations of Slick. One to control the thumbnails, one to control the full size images and descriptions.
The thumbnail slideshow acts as navigation for the full size image slideshow.
This compoennt is not visible at smaller breakpoints.
<!-- start `photo-slideshow` component; -->
<div class="photo-slideshow d-none d-md-block">
<div class="slider photo-slideshow__for">
<div class="photo-slideshow__for-slide">
<div class="row">
<div class="col-8">
<div class="img-cover"><img src="http://via.placeholder.com/912x548" alt="empty placeholder image" /></div>
</div>
<div class="col-4">
<h3>Curabitur faucibus massa dictum massa aliquam, at ultrices orci vulputate</h3>
<div class="photo-slideshow__for-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum condimentum enim non placerat. Etiam cursus posuere accumsan. Curabitur sem libero, volutpat non congue at, molestie ac mauris. Vivamus eu porttitor libero, quis porttitor turpis. Etiam sodales nisl ut augue suscipit convallis.</p>
</div>
</div>
</div>
</div>
<div class="photo-slideshow__for-slide">
<div class="row">
<div class="col-8">
<div class="img-cover"><img src="http://via.placeholder.com/912x548" alt="empty placeholder image" /></div>
</div>
<div class="col-4">
<h3>Maecenas mollis ipsum id nisi dictum congue</h3>
<div class="photo-slideshow__for-description">
<p>Vestibulum velit orci, suscipit et nulla ullamcorper, efficitur blandit lacus. Suspendisse ligula metus, euismod quis mauris non, sollicitudin rutrum velit. Sed ullamcorper purus libero, vitae sollicitudin velit molestie in. Etiam porta urna sed lectus tristique viverra ut nec nisi.</p>
</div>
</div>
</div>
</div>
<div class="photo-slideshow__for-slide">
<div class="row">
<div class="col-8">
<div class="img-cover"><img src="http://via.placeholder.com/912x548" alt="empty placeholder image" /></div>
</div>
<div class="col-4">
<h3>Cras tempor eros et arcu pretium convallis</h3>
<div class="photo-slideshow__for-description">
<p>Suspendisse in vestibulum purus. Mauris sit amet congue nibh. Morbi non risus id tortor laoreet vestibulum. Vivamus sit amet augue augue. Aliquam ultrices tortor a nunc luctus, non mollis tortor vehicula. Integer et auctor quam. Maecenas non lacus rhoncus, condimentum diam viverra, pretium ipsum.</p>
</div>
</div>
</div>
</div>
<div class="photo-slideshow__for-slide">
<div class="row">
<div class="col-8">
<div class="img-cover"><img src="http://via.placeholder.com/912x548" alt="empty placeholder image" /></div>
</div>
<div class="col-4">
<h3>Aenean eleifend turpis a ipsum euismod, ut faucibus libero sagittis</h3>
<div class="photo-slideshow__for-description">
<p>Praesent neque dui, tincidunt ac egestas id, molestie non neque. Phasellus fermentum purus in molestie hendrerit. Ut ac lacinia orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque magna nunc, posuere at est sit amet, malesuada elementum justo.</p>
</div>
</div>
</div>
</div>
<div class="photo-slideshow__for-slide">
<div class="row">
<div class="col-8">
<div class="img-cover"><img src="http://via.placeholder.com/912x548" alt="empty placeholder image" /></div>
</div>
<div class="col-4">
<h3>Ut placerat nunc et purus mollis malesuada</h3>
<div class="photo-slideshow__for-description">
<p>Donec vestibulum venenatis ligula, ut lobortis massa convallis quis. Ut eu hendrerit lorem. Integer consectetur nisl id iaculis sagittis. Duis ut tristique dolor.</p>
</div>
</div>
</div>
</div>
<div class="photo-slideshow__for-slide">
<div class="row">
<div class="col-8">
<div class="img-cover"><img src="http://via.placeholder.com/912x548" alt="empty placeholder image" /></div>
</div>
<div class="col-4">
<h3>Nullam pulvinar ante non mauris aliquet, ultricies posuere ipsum aliquam</h3>
<div class="photo-slideshow__for-description">
<p>Curabitur est quam, laoreet id laoreet vitae, molestie et justo. Etiam vitae orci egestas, vestibulum felis eu, maximus risus. Duis ut urna pulvinar, rutrum diam vel, sagittis mi. Sed nulla ipsum, tristique in tincidunt at, elementum sed purus. Fusce bibendum rutrum est.</p>
</div>
</div>
</div>
</div>
<div class="photo-slideshow__for-slide">
<div class="row">
<div class="col-8">
<div class="img-cover"><img src="http://via.placeholder.com/912x548" alt="empty placeholder image" /></div>
</div>
<div class="col-4">
<h3>Ut maximus orci at iaculis interdum</h3>
<div class="photo-slideshow__for-description">
<p>Cras laoreet gravida massa ut pharetra. Morbi volutpat neque sed turpis ultrices luctus. Donec accumsan ipsum ut tristique imperdiet. Aenean facilisis eu erat eget ultricies. Proin vitae mi id tortor imperdiet finibus ac vitae magna. Maecenas rhoncus convallis magna ut interdum.</p>
</div>
</div>
</div>
</div>
<div class="photo-slideshow__for-slide">
<div class="row">
<div class="col-8">
<div class="img-cover"><img src="http://via.placeholder.com/912x548" alt="empty placeholder image" /></div>
</div>
<div class="col-4">
<h3>Cras malesuada mi quis tempus venenatis</h3>
<div class="photo-slideshow__for-description">
<p>Fusce aliquam ex nec nulla ultricies luctus. Proin vestibulum in dolor eu rutrum. Duis sit amet euismod neque. Quisque et nulla metus. Curabitur vehicula neque id varius efficitur. Aliquam malesuada iaculis vulputate. Donec sed interdum dui.</p>
</div>
</div>
</div>
</div>
<div class="photo-slideshow__for-slide">
<div class="row">
<div class="col-8">
<div class="img-cover"><img src="http://via.placeholder.com/912x548" alt="empty placeholder image" /></div>
</div>
<div class="col-4">
<h3>Fusce vehicula mauris at eros feugiat, pharetra tincidunt justo luctus</h3>
<div class="photo-slideshow__for-description">
<p>Maecenas sem mauris, porta ac bibendum vitae, hendrerit eu sapien. Maecenas mollis ullamcorper tincidunt. Integer posuere, tellus quis auctor fringilla, risus turpis gravida justo, id faucibus lectus turpis vel eros. Curabitur vel maximus ligula.</p>
</div>
</div>
</div>
</div>
<div class="photo-slideshow__for-slide">
<div class="row">
<div class="col-8">
<div class="img-cover"><img src="http://via.placeholder.com/912x548" alt="empty placeholder image" /></div>
</div>
<div class="col-4">
<h3>Maecenas quis odio quis nunc dapibus vulputate</h3>
<div class="photo-slideshow__for-description">
<p>Donec pulvinar lacus mauris, quis laoreet nunc dignissim a. Cras dapibus arcu quis urna molestie porttitor. Integer orci urna, tristique in odio interdum, vulputate commodo dui. Nullam interdum, erat eget fermentum cursus, eros magna semper est, sed blandit diam ex id velit.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="slider photo-slideshow__nav">
<div class="photo-slideshow__nav-slide">
<div class="img-cover"><img src="http://via.placeholder.com/128x96" alt="empty placeholder image" /></div>
</div>
<div class="photo-slideshow__nav-slide">
<div class="img-cover"><img src="http://via.placeholder.com/128x96" alt="empty placeholder image" /></div>
</div>
<div class="photo-slideshow__nav-slide">
<div class="img-cover"><img src="http://via.placeholder.com/128x96" alt="empty placeholder image" /></div>
</div>
<div class="photo-slideshow__nav-slide">
<div class="img-cover"><img src="http://via.placeholder.com/128x96" alt="empty placeholder image" /></div>
</div>
<div class="photo-slideshow__nav-slide">
<div class="img-cover"><img src="http://via.placeholder.com/128x96" alt="empty placeholder image" /></div>
</div>
<div class="photo-slideshow__nav-slide">
<div class="img-cover"><img src="http://via.placeholder.com/128x96" alt="empty placeholder image" /></div>
</div>
<div class="photo-slideshow__nav-slide">
<div class="img-cover"><img src="http://via.placeholder.com/128x96" alt="empty placeholder image" /></div>
</div>
<div class="photo-slideshow__nav-slide">
<div class="img-cover"><img src="http://via.placeholder.com/128x96" alt="empty placeholder image" /></div>
</div>
<div class="photo-slideshow__nav-slide">
<div class="img-cover"><img src="http://via.placeholder.com/128x96" alt="empty placeholder image" /></div>
</div>
<div class="photo-slideshow__nav-slide">
<div class="img-cover"><img src="http://via.placeholder.com/128x96" alt="empty placeholder image" /></div>
</div>
</div>
</div>
</div>
</div>
<!-- end `photo-slideshow` component; -->{
"slides": [
{
"imgFull": "http://via.placeholder.com/912x548",
"imgThumb": "http://via.placeholder.com/128x96",
"alt": "empty placeholder image",
"title": "Curabitur faucibus massa dictum massa aliquam, at ultrices orci vulputate",
"description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum condimentum enim non placerat. Etiam cursus posuere accumsan. Curabitur sem libero, volutpat non congue at, molestie ac mauris. Vivamus eu porttitor libero, quis porttitor turpis. Etiam sodales nisl ut augue suscipit convallis.</p>"
},
{
"imgFull": "http://via.placeholder.com/912x548",
"imgThumb": "http://via.placeholder.com/128x96",
"alt": "empty placeholder image",
"title": "Maecenas mollis ipsum id nisi dictum congue",
"description": "<p>Vestibulum velit orci, suscipit et nulla ullamcorper, efficitur blandit lacus. Suspendisse ligula metus, euismod quis mauris non, sollicitudin rutrum velit. Sed ullamcorper purus libero, vitae sollicitudin velit molestie in. Etiam porta urna sed lectus tristique viverra ut nec nisi.</p>"
},
{
"imgFull": "http://via.placeholder.com/912x548",
"imgThumb": "http://via.placeholder.com/128x96",
"alt": "empty placeholder image",
"title": "Cras tempor eros et arcu pretium convallis",
"description": "<p>Suspendisse in vestibulum purus. Mauris sit amet congue nibh. Morbi non risus id tortor laoreet vestibulum. Vivamus sit amet augue augue. Aliquam ultrices tortor a nunc luctus, non mollis tortor vehicula. Integer et auctor quam. Maecenas non lacus rhoncus, condimentum diam viverra, pretium ipsum.</p>"
},
{
"imgFull": "http://via.placeholder.com/912x548",
"imgThumb": "http://via.placeholder.com/128x96",
"alt": "empty placeholder image",
"title": "Aenean eleifend turpis a ipsum euismod, ut faucibus libero sagittis",
"description": "<p>Praesent neque dui, tincidunt ac egestas id, molestie non neque. Phasellus fermentum purus in molestie hendrerit. Ut ac lacinia orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque magna nunc, posuere at est sit amet, malesuada elementum justo.</p>"
},
{
"imgFull": "http://via.placeholder.com/912x548",
"imgThumb": "http://via.placeholder.com/128x96",
"alt": "empty placeholder image",
"title": "Ut placerat nunc et purus mollis malesuada",
"description": "<p>Donec vestibulum venenatis ligula, ut lobortis massa convallis quis. Ut eu hendrerit lorem. Integer consectetur nisl id iaculis sagittis. Duis ut tristique dolor.</p>"
},
{
"imgFull": "http://via.placeholder.com/912x548",
"imgThumb": "http://via.placeholder.com/128x96",
"alt": "empty placeholder image",
"title": "Nullam pulvinar ante non mauris aliquet, ultricies posuere ipsum aliquam",
"description": "<p>Curabitur est quam, laoreet id laoreet vitae, molestie et justo. Etiam vitae orci egestas, vestibulum felis eu, maximus risus. Duis ut urna pulvinar, rutrum diam vel, sagittis mi. Sed nulla ipsum, tristique in tincidunt at, elementum sed purus. Fusce bibendum rutrum est.</p>"
},
{
"imgFull": "http://via.placeholder.com/912x548",
"imgThumb": "http://via.placeholder.com/128x96",
"alt": "empty placeholder image",
"title": "Ut maximus orci at iaculis interdum",
"description": "<p>Cras laoreet gravida massa ut pharetra. Morbi volutpat neque sed turpis ultrices luctus. Donec accumsan ipsum ut tristique imperdiet. Aenean facilisis eu erat eget ultricies. Proin vitae mi id tortor imperdiet finibus ac vitae magna. Maecenas rhoncus convallis magna ut interdum.</p>"
},
{
"imgFull": "http://via.placeholder.com/912x548",
"imgThumb": "http://via.placeholder.com/128x96",
"alt": "empty placeholder image",
"title": "Cras malesuada mi quis tempus venenatis",
"description": "<p>Fusce aliquam ex nec nulla ultricies luctus. Proin vestibulum in dolor eu rutrum. Duis sit amet euismod neque. Quisque et nulla metus. Curabitur vehicula neque id varius efficitur. Aliquam malesuada iaculis vulputate. Donec sed interdum dui.</p>"
},
{
"imgFull": "http://via.placeholder.com/912x548",
"imgThumb": "http://via.placeholder.com/128x96",
"alt": "empty placeholder image",
"title": "Fusce vehicula mauris at eros feugiat, pharetra tincidunt justo luctus",
"description": "<p>Maecenas sem mauris, porta ac bibendum vitae, hendrerit eu sapien. Maecenas mollis ullamcorper tincidunt. Integer posuere, tellus quis auctor fringilla, risus turpis gravida justo, id faucibus lectus turpis vel eros. Curabitur vel maximus ligula.</p>"
},
{
"imgFull": "http://via.placeholder.com/912x548",
"imgThumb": "http://via.placeholder.com/128x96",
"alt": "empty placeholder image",
"title": "Maecenas quis odio quis nunc dapibus vulputate",
"description": "<p>Donec pulvinar lacus mauris, quis laoreet nunc dignissim a. Cras dapibus arcu quis urna molestie porttitor. Integer orci urna, tristique in odio interdum, vulputate commodo dui. Nullam interdum, erat eget fermentum cursus, eros magna semper est, sed blandit diam ex id velit.</p>"
}
]
}
jQuery(($: JQueryStatic) => {
$('.photo-slideshow').each((index: number, component: HTMLElement) => {
const $component = $(component);
const selectorFor = '.photo-slideshow__for';
const selectorNav = '.photo-slideshow__nav';
$component.find(selectorFor).slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: selectorNav
});
$component.find(selectorNav).slick({
slidesToShow: 6,
slidesToScroll: 1,
asNavFor: selectorFor,
arrows: false,
dots: false,
focusOnSelect: true
});
});
});
.photo-slideshow {
margin-top: size(1);
background: $color__backgroundDarkShade;
h3 {
margin: size(1) 0;
}
&__for {
.img-cover {
height: size(18);
margin: size(1) 0 size(1) size(1);
@include breakpoint($breakpoint--lg) {
height: size(22);
}
}
}
&__nav {
padding: 0 0 size(1) size(1);
.img-cover {
height: size(3);
}
&-slide {
cursor: pointer;
margin: 0 size(0.5);
&.slick-current {
.img-cover {
background: $color__backgroundDark;
}
img {
opacity: $opacity__hover;
}
}
&:focus,
&.slick-current:focus {
outline: none;
.img-cover {
background: $color__highlightLight;
}
img {
opacity: $opacity__hover;
}
}
}
}
}