.custom-gallery-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.main-display {
width: 100%;
height: 500px;
overflow: hidden;
border-radius: 8px;
background: #f6f6f6;
display: flex;
align-items: center;
justify-content: center;
}
.main-display img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition:
opacity .45s ease,
transform .45s ease;
}
.main-display img.fade-out {
opacity: 0;
transform: scale(1.05);
}
#active-title {
text-align: center;
margin-top: 15px;
font-weight: 600;
font-size: 1.05rem;
transition: opacity .3s ease;
}
.carousel-wrapper {
display: flex;
align-items: center;
gap: 10px;
margin-top: 15px;
}
.thumbnail-strip-window {
flex: 1;
overflow: hidden;
}
.thumbnail-strip {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
}
.thumbnail-strip::-webkit-scrollbar {
display: none;
}
.thumb {
width: 80px;
height: 80px;
min-width: 80px;
object-fit: cover;
cursor: pointer;
border-radius: 4px;
opacity: .55;
border: 2px solid transparent;
transition: all .25s ease;
}
.thumb:hover {
opacity: .85;
}
.thumb.active {
opacity: 1;
border-color: #111;
transform: scale(1.05);
}
.nav-btn {
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: rgba(0,0,0,.75);
color: #fff;
cursor: pointer;
font-size: 14px;
transition: .2s;
}
.nav-btn:hover {
background: #000;
}
function changeImage(thumbElement) {
const mainImg = document.getElementById(‘active-image’);
const title = document.getElementById(‘active-title’);
mainImg.classList.add(‘fade-out’);
title.style.opacity = ‘0’;
setTimeout(() => {
mainImg.src = thumbElement.src;
mainImg.alt = thumbElement.alt;
title.textContent = thumbElement.alt;
mainImg.onload = () => {
mainImg.classList.remove(‘fade-out’);
title.style.opacity = ‘1’;
};
}, 250);
document.querySelectorAll(‘.thumb’).forEach(img => {
img.classList.remove(‘active’);
});
thumbElement.classList.add(‘active’);
thumbElement.scrollIntoView({
behavior: ‘smooth’,
inline: ‘center’,
block: ‘nearest’
});
}
function scrollThumbnails(direction) {
const strip = document.getElementById(‘thumbnail-strip’);
strip.scrollBy({
left: direction * 270,
behavior: ‘smooth’
});
}
