Kadence Blocks Advanced Slider - Replace Next-Previous Icons.js

<script type="text/javascript">
// Function to replace the SVG in all matching buttons
function replaceSVGIcons(buttonSelector, newSVGCode) {
    // Select all buttons containing the old SVG
    const buttons = document.querySelectorAll(buttonSelector);

    // Loop through each button and replace the SVG
    buttons.forEach(function(button) {
        const oldSVG = button.querySelector('svg');
        if (oldSVG) {
            oldSVG.outerHTML = newSVGCode;
        }
    });
}

// New SVG code
const newSVGCode = `<svg viewBox="0 0 24 24" height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M6.41 6L5 7.41L9.58 12L5 16.59L6.41 18l6-6z" fill="currentColor"></path><path d="m13 6l-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z" fill="currentColor"></path></svg>`;

// Mutation observer to check for dynamically loaded content
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // Run the replacement function if the buttons exist
        if (document.querySelectorAll('.splide__arrow').length > 0) {
            replaceSVGIcons('.splide__arrow', newSVGCode);
            // Stop observing once the SVGs have been replaced
            observer.disconnect();
        }
    });
});

// Start observing the document for added nodes
observer.observe(document.body, { childList: true, subtree: true });

// Fallback to check if content is already loaded
document.addEventListener('DOMContentLoaded', function() {
    replaceSVGIcons('.splide__arrow', newSVGCode);
});
</script>