document.addEventListener("DOMContentLoaded", function() {
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto', // Adjust this if necessary
spaceBetween: 10, // Adjust space between slides
loop: true, // Set to true if you want infinite looping
watchSlidesVisibility: true, // Watch for which slides are visible
on: {
slideChange: function() {
updateLastVisibleThumbnail();
},
init: function() {
updateLastVisibleThumbnail(); // Ensure overlay is set on load
}
}
});
function updateLastVisibleThumbnail() {
// Get all slides in the swiper container
var slides = document.querySelectorAll('.swiper-slide');
var lastVisibleSlide = null;
// Loop through the slides to find the last visible one
slides.forEach(function(slide) {
// Check if the slide is currently visible
if (slide.offsetLeft + slide.offsetWidth > swiper.wrapperEl.scrollLeft) {
lastVisibleSlide = slide;
}
});
// If there is a last visible slide, add the class to show the overlay
if (lastVisibleSlide) {
slides.forEach(function(slide) {
slide.classList.remove('overlay-visible'); // Hide overlay on all slides
});
lastVisibleSlide.classList.add('overlay-visible'); // Show overlay on the last visible slide
}
}
});
