Галерея дает возможность увеличивать фото, вставленные в карусель Taplink, открывая их с исходным соотношением сторон и делая красивую галерею
Добавьте в блок html внизу таплинка
<script>
Array.from(document.querySelectorAll('.slider-slide .picture-container')).map((e) => {
let link = e.getAttribute('data-src');
if (!link.length){
link=e.style.backgroundImage.replace('url(','').replace(')','')
}
var wrapper = document.createElement('a');
e.parentNode.insertBefore(wrapper, e);
wrapper.appendChild(e);
e.closest('a').href=link;
e.closest('a').setAttribute('data-fancybox','gallery');
e.insertAdjacentHTML('afterbegin','<div class="overlay"><em class="mdi mdi-magnify-plus"></em></div>')
})
</script>
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.1.99/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<style>
.picture-container {position:relative;}
.picture-container::after{
content:'';
position:absolute;
left:0;
top:0;
z-index:2;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
}
.picture-container>*{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:3;
}
.mdi{font-size:2.3rem;}
</style>
