/* Basic resets for full width/height */ html, body { width: 100%; height: 100%; margin: 0; padding: 0; } /* Container styling */ .image-slider-container { width: 100vw; overflow: hidden; position: relative; padding-top: 0; /* Default for desktop */ } /* Image container: default mobile style */ .image-container { width: 100%; height: auto; position: relative; } @media (min-width: 768px) { .slider-image { margin-left: 0 !important; margin-right: 0 !important; } } @media (min-width: 768px) { .ast-page-builder-template .entry-content[data-ast-blocks-layout] > .inherit-container-width > *, .ast-page-builder-template .entry-content[data-ast-blocks-layout] > * > *, .entry-content[data-ast-blocks-layout] > .wp-block-cover .wp-block-cover__inner-container { max-width: none !important; } } /* For desktop: force full viewport height */ @media (min-width: 768px) { .image-container { height: 100vh; } } /* Responsive image styling */ .responsive-image { width: 100%; height: 100%; object-fit: cover; } /* Slider button styles */ .slider-button { position: absolute; top: 140px; padding: 10px; background-color: rgba(0, 0, 0, 0.5); color: white; border: none; cursor: pointer; font-size: 24px; z-index: 1; } .slider-button.prev { left: 0; } .slider-button.next { right: 0; } .slider-button:hover { background-color: rgba(0, 0, 0, 0.8); } .slider-button:focus { outline: none; } /* Mobile-specific adjustments */ @media only screen and (max-width: 768px) { .image-slider-container { padding-top: 70px; /* Extra spacing for mobile */ } } let currentIndex = 0; const images = document.querySelectorAll(‘.slider-image’); function showNextImage() { // Hide current image images[currentIndex].style.display = ‘none’; // Move to next image, looping back to start if needed currentIndex = (currentIndex + 1) % images.length; // Show the next image images[currentIndex].style.display = ‘block’; } function showPrevImage() { // Hide current image images[currentIndex].style.display = ‘none’; // Move to previous image, looping back if needed currentIndex = (currentIndex – 1 + images.length) % images.length; // Show the previous image images[currentIndex].style.display = ‘block’; } // Automatically change image every 6 seconds setInterval(showNextImage, 6000);