Whole-Home

<script>

document.addEventListener('DOMContentLoaded', function () {
  const splideElement = document.querySelector('#brxe-dnylrh');
  const nextArrow = document.querySelector('.process-next-arrow');
  const prevArrow = document.querySelector('.process-previous-arrow');

  if (splideElement) {
    // Initialize Splide with the appropriate configuration
    const splideSlider = new Splide(splideElement, {
      type: 'slide',              // Use 'slide' type for straightforward slides
      perPage: 1,                 // Show one slide at a time
      perMove: 1,                 // Move one slide at a time
      pagination: false,          // Disable pagination controls
      arrows: false,              // Disable default arrows since we have custom arrows
      keyboard: 'global',         // Enable keyboard navigation
      speed: 400,                 // Transition speed in ms
      gap: '30px',                // Gap between slides
      drag: true,                 // Enable dragging with the mouse
      fixedWidth: '43%',          // Set slide width to 43%
      lazyLoad: 'nearby',         // Enable lazy loading for nearby slides
      rewind: false               // Do not rewind the slider
    }).mount();

    // Initially, hide the previous arrow and show the next arrow
    prevArrow.style.display = 'none';
    nextArrow.style.display = 'block';

    // Function to update arrow visibility based on the current slide index
    function updateArrowVisibility(newIndex) {
      const totalSlides = splideSlider.Components.Slides.getLength(); // Get the total number of slides

      if (newIndex === 0) {
        // When at the first slide, hide previous arrow and show next arrow
        prevArrow.style.display = 'none';
        nextArrow.style.display = 'block';
      } else if (newIndex === totalSlides - 1) {
        // When at the last slide, show previous arrow and hide next arrow
        prevArrow.style.display = 'block';
        nextArrow.style.display = 'none';
      }
    }

    // Event listener for when the slider **finishes moving**
    splideSlider.on('moved', function (newIndex) {
      updateArrowVisibility(newIndex);
    });

    // Event listener to move to the next slide when the next arrow is clicked
    nextArrow.addEventListener('click', function () {
      splideSlider.go('>'); // Move to the next slide
    });

    // Event listener to move to the previous slide when the previous arrow is clicked
    prevArrow.addEventListener('click', function () {
      splideSlider.go('<'); // Move to the previous slide
    });

    // Initial visibility check when the page loads
    updateArrowVisibility(0);
  }
});



  </script>