My Soul Kart

Contact

Get in Touch

Find Us

Visit us and connect with my soul kart.

Address

Example avenue 100, example country

Hours

9am – 6pm

document.addEventListener('DOMContentLoaded', function () { const carousel = document.querySelector('.msk-ekanga-gallery'); if (!carousel) { return; } const track = carousel.querySelector('.msk-carousel-track'); const cards = carousel.querySelectorAll('.msk-carousel-card'); const nextButton = carousel.querySelector('.msk-carousel-next'); const prevButton = carousel.querySelector('.msk-carousel-prev'); const dots = carousel.querySelectorAll('.msk-carousel-dot'); if (!track || !cards.length) { return; } let currentSlide = 0; function getCardWidth() { const card = cards[0]; if (!card) { return 0; } const cardWidth = card.getBoundingClientRect().width; const styles = window.getComputedStyle(track); const gap = parseFloat(styles.columnGap || styles.gap || 0); return cardWidth + gap; } function getVisibleCards() { const windowElement = carousel.querySelector('.msk-carousel-window'); if (!windowElement) { return 4; } const windowWidth = windowElement.getBoundingClientRect().width; const cardWidth = cards[0].getBoundingClientRect().width; const gap = parseFloat( window.getComputedStyle(track).columnGap || window.getComputedStyle(track).gap || 0 ); return Math.max( 1, Math.floor( (windowWidth + gap) / (cardWidth + gap) ) ); } function getMaxSlide() { const visibleCards = getVisibleCards(); return Math.max( 0, cards.length - visibleCards ); } function updateCarousel() { const distance = getCardWidth() * currentSlide; track.style.transform = 'translate3d(-' + distance + 'px, 0, 0)'; dots.forEach(function (dot, index) { dot.classList.toggle( 'is-active', index === Math.min( currentSlide, dots.length - 1 ) ); }); if (prevButton) { prevButton.disabled = currentSlide <= 0; } if (nextButton) { nextButton.disabled = currentSlide >= getMaxSlide(); } } function nextSlide() { const maxSlide = getMaxSlide(); if (currentSlide < maxSlide) { currentSlide++; updateCarousel(); } } function previousSlide() { if (currentSlide > 0) { currentSlide--; updateCarousel(); } } if (nextButton) { nextButton.addEventListener( 'click', nextSlide ); } if (prevButton) { prevButton.addEventListener( 'click', previousSlide ); } dots.forEach(function (dot) { dot.addEventListener( 'click', function () { const requestedSlide = parseInt( dot.dataset.slide, 10 ); const maxSlide = getMaxSlide(); currentSlide = Math.min( requestedSlide, maxSlide ); updateCarousel(); } ); }); window.addEventListener( 'resize', function () { currentSlide = Math.min( currentSlide, getMaxSlide() ); updateCarousel(); } ); /* * Clicking an image opens the original image. * The gallery itself is NOT a WooCommerce product section. */ cards.forEach(function (card) { card.addEventListener( 'click', function (event) { event.preventDefault(); const image = card.querySelector('img'); if (!image) { return; } const overlay = document.createElement('div'); overlay.className = 'msk-simple-lightbox'; overlay.innerHTML = ` ${image.alt}

${image.alt}

`; document.body.appendChild(overlay); document.body.style.overflow = 'hidden'; function closeLightbox() { overlay.remove(); document.body.style.overflow = ''; } overlay.addEventListener( 'click', function (e) { if ( e.target === overlay || e.target.classList.contains( 'msk-simple-lightbox-close' ) ) { closeLightbox(); } } ); document.addEventListener( 'keydown', function escapeHandler(e) { if (e.key === 'Escape') { closeLightbox(); document.removeEventListener( 'keydown', escapeHandler ); } } ); } ); }); updateCarousel(); });