<script>
document.addEventListener("DOMContentLoaded", function() {
(function () {
const slideTime = 600;
const mobileTime = 2000;
function initGalleryHover() {
const hoverGalleries = document.querySelectorAll('.hover-gallery');
if (hoverGalleries.length === 0) return;
hoverGalleries.forEach(gallery => {
gallery.removeEventListener('mouseenter', handleMouseEnter);
gallery.removeEventListener('mouseleave', handleMouseLeave);
});
const isDesktop = document.documentElement.clientWidth > 640;
hoverGalleries.forEach(gallery => {
if (isDesktop) {
gallery.addEventListener('mouseenter', handleMouseEnter);
gallery.addEventListener('mouseleave', handleMouseLeave);
} else {
initMobileAutoClick(gallery);
}
});
}
let timerId = null;
function handleMouseEnter(event) {
if (timerId) {
clearInterval(timerId);
timerId = null;
}
const gallery = event.currentTarget;
const arrowElem = gallery.querySelector('.t-slds__arrow-right');
if (arrowElem) {
arrowElem.click();
timerId = setInterval(() => {
arrowElem.click();
}, slideTime);
}
}
function handleMouseLeave() {
if (timerId) {
clearInterval(timerId);
timerId = null;
}
}
function initMobileAutoClick(gallery) {
const slideArrows = gallery.querySelectorAll('.t-slds__arrow-right');
if (slideArrows.length === 0) return;
let mobileTimerId = setInterval(() => {
slideArrows.forEach((el, index) => {
el.click();
});
}, mobileTime);
gallery.dataset.mobileTimerId = mobileTimerId;
}
function handleResize() {
const hoverGalleries = document.querySelectorAll('.hover-gallery');
hoverGalleries.forEach(gallery => {
if (timerId) {
clearInterval(timerId);
timerId = null;
}
if (gallery.dataset.mobileTimerId) {
clearInterval(parseInt(gallery.dataset.mobileTimerId));
delete gallery.dataset.mobileTimerId;
}
gallery.removeEventListener('mouseenter', handleMouseEnter);
gallery.removeEventListener('mouseleave', handleMouseLeave);
});
initGalleryHover();
}
initGalleryHover();
let resizeTimeout;
window.addEventListener('resize', () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(handleResize, 250);
});
})();
});
</script>
<style>
.hover-gallery .t-slds_animated {
transition: height ease-in-out 0s,transform ease-in-out 0s !important;
}
.hover-gallery{
cursor: pointer;
overflow: hidden;
}
.hover-gallery div[data-elem-type="button"] {
opacity: 0;
pointer-events: none;
transition: transform 0.3s ease;
}
.hover-gallery:hover div[data-elem-type="button"] {
opacity: 1;
transform: translateY(-100%);
pointer-events: all;
}
</style>