<script>
document.addEventListener("DOMContentLoaded", function() {
(function () {
const MobTime = 2000;
const btnLink = document.querySelectorAll('div[class*="btn-link"]');
btnLink.forEach(function (el, index) {
const btnIndex = el.getAttribute('class').match(/btn-link(\d+)/)[1];
el.setAttribute('data-btn-link', btnIndex);
});
const galleryLink = document.querySelectorAll('div[class*="gallery-link"]');
galleryLink.forEach(function (el, index) {
const galleryIndex = el.getAttribute('class').match(/gallery-link(\d+)/)[1];
el.setAttribute('data-gallery-link', galleryIndex);
});
let timerId = '';
if (window.innerWidth > 640){
btnLink.forEach(function (el, index) {
el.addEventListener('mouseenter',function(e) {
const indx = el.getAttribute('data-btn-link');
const arrowElem = document.querySelector('.t396__elem[data-gallery-link="'+indx+'"] .t-slds__arrow-right');
timerId = setInterval(() => arrowElem.click() , 100);
});
el.addEventListener('mouseleave',function(e) {
clearInterval(timerId);
});
});
}else{
const slideArrow = document.querySelectorAll('div[class*="gallery-link"] .t-slds__arrow-right');
timerId = setInterval(() => {
slideArrow.forEach(function (el, index) {
el.click();
});
}, MobTime)
};
})();
});
</script>
<style>
div[class*="gallery-link"] .t-slds_animated {
transition: height ease-in-out 0s,transform ease-in-out 0s !important;
}
div[class*="btn-link"] {
transition: all 0.2s ease-in-out;
border: 0px solid #fff;
opacity: 0.4;
}
div[class*="btn-link"]:hover {
border-width: 10px;
}
</style>