script> document.addEventListener('DOMContentLoaded', function() { const wrapper = document.querySelector('.popular-rooms.mphb_sc_rooms-wrapper'); if (!wrapper) return; // 1. Inject Floating Overlap Arrows const widgetContainer = wrapper.closest('.elementor-widget-container') || wrapper.parentElement; if (widgetContainer && !widgetContainer.querySelector('.pr-arrow')) { const prevBtn = document.createElement('button'); prevBtn.className = 'pr-arrow pr-prev'; prevBtn.innerHTML = '❮'; prevBtn.setAttribute('aria-label', 'Previous'); const nextBtn = document.createElement('button'); nextBtn.className = 'pr-arrow pr-next'; nextBtn.innerHTML = '❯'; nextBtn.setAttribute('aria-label', 'Next'); widgetContainer.appendChild(prevBtn); widgetContainer.appendChild(nextBtn); const stepWidth = 300; nextBtn.addEventListener('click', () => wrapper.scrollBy({ left: stepWidth, behavior: 'smooth' })); prevBtn.addEventListener('click', () => wrapper.scrollBy({ left: -stepWidth, behavior: 'smooth' })); } // 2. Setup Cards (Price Tag & Circular Hover Button inside Image) const roomCards = wrapper.querySelectorAll('.mphb-room-type'); roomCards.forEach(card => { const imgWrapper = card.querySelector('.mphb-loop-room-thumbnail'); const priceTag = card.querySelector('.mphb-regular-price'); // Prevent Native Drag sticking card.querySelectorAll('img, a').forEach(el => { el.addEventListener('dragstart', (e) => e.preventDefault()); }); // Move Price Badge inside Thumbnail if (imgWrapper && priceTag && !imgWrapper.querySelector('.mphb-regular-price')) { imgWrapper.appendChild(priceTag); } // Link target URL (Room details page link) const roomLink = card.querySelector('a.mphb-room-type-title')?.getAttribute('href') || '#'; // Create Circle Overlay Button Inside Image if (imgWrapper && !imgWrapper.querySelector('.circle-hover-btn')) { const circleBtn = document.createElement('a'); circleBtn.href = roomLink; circleBtn.className = 'circle-hover-btn'; circleBtn.innerHTML = 'Know
Details'; imgWrapper.appendChild(circleBtn); } }); // 3. Smooth Mouse/Touch Drag let isDown = false; let startX, scrollLeft; wrapper.addEventListener('mousedown', (e) => { isDown = true; startX = e.pageX - wrapper.offsetLeft; scrollLeft = wrapper.scrollLeft; }); wrapper.addEventListener('mouseleave', () => { isDown = false; }); wrapper.addEventListener('mouseup', () => { isDown = false; }); wrapper.addEventListener('mousemove', (e) => { if (!isDown) return; e.preventDefault(); const x = e.pageX - wrapper.offsetLeft; const walk = (x - startX) * 1.5; wrapper.scrollLeft = scrollLeft - walk; }); // 4. Auto Carousel Scroll let isHovered = false; setInterval(() => { if (!isHovered && !isDown) { const maxScroll = wrapper.scrollWidth - wrapper.clientWidth; if (wrapper.scrollLeft >= maxScroll - 10) { wrapper.scrollTo({ left: 0, behavior: 'smooth' }); } else { wrapper.scrollBy({ left: 300, behavior: 'smooth' }); } } }, 4000); wrapper.addEventListener('mouseenter', () => { isHovered = true; }); wrapper.addEventListener('mouseleave', () => { isHovered = false; }); });