<style>
/* Hide the cursor */
body:not(.et-fb) .et_pb_gallery.et_pb_slider *,
body:not(.et-fb) .et_pb_gallery.et_pb_slider .et-pb-slider-arrows a {
	cursor: none !important;
}
/* Make the arrows fixed */
.et_pb_gallery.et_pb_slider .et-pb-arrow-prev,
.et_pb_gallery.et_pb_slider .et-pb-arrow-next {
    display: none;
    position: fixed; 
    z-index: 9999; 
    transition: none; 
}
</style>

<script>
jQuery(document).ready(function($) {
   
    // Function to move the arrow with the cursor for mouse events
    function moveArrow(arrowClass, e) {
        $(arrowClass).css({
            'display': 'block',
            'left': (e.clientX - 24) + 'px',
            'top': e.clientY + 'px'
        });
    }

    // Function to simulate a click on the arrow elements
    function triggerClick(arrowClass) {
        $(arrowClass).click();
    }  

    // Mousemove event for each gallery
    $(document).on('mousemove', '.et_pb_gallery.et_pb_slider', function(e) {
        var $thisGallery = $(this);
        var galleryOffset = $thisGallery.offset();
        var galleryWidth = $thisGallery.width();
        var galleryHeight = $thisGallery.height();
        var mouseX = e.clientX - galleryOffset.left;
        var mouseY = (e.clientY + $(window).scrollTop()) - galleryOffset.top;
        
        // Calculate if the cursor is inside this specific gallery
        var isInsideGallery = (mouseX > 0 && mouseX < galleryWidth && mouseY > 0 && mouseY < galleryHeight);

        // Hide all arrows initially
        $thisGallery.find('.et-pb-arrow-prev, .et-pb-arrow-next').hide();

        // Adjust the arrow position / visibility for this gallery
        if (isInsideGallery) {
            if (mouseX < galleryWidth / 2) {
                moveArrow($thisGallery.find('.et-pb-arrow-prev'), e);
            } else {
                moveArrow($thisGallery.find('.et-pb-arrow-next'), e);
            }
        }
    });

    // Touch event to handle gallery navigation
    $('.et_pb_gallery.et_pb_slider').on('touchstart', function(e) {
                // Prevent the mousemove event from firing and the default touch action
                e.stopPropagation();
                e.preventDefault();

                var $thisGallery = $(this);
                var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
                var galleryOffset = $thisGallery.offset();
                var galleryWidth = $thisGallery.width();
                var touchX = touch.pageX - galleryOffset.left;

                // Decide whether to trigger the next or previous based on touch location
                if (touchX < galleryWidth / 2) {
                    // Left side touched, go to the previous image
                    triggerClick($thisGallery.find('.et-pb-arrow-prev'));
                } else {
                    // Right side touched, go to the next image
                    triggerClick($thisGallery.find('.et-pb-arrow-next'));
                }

                // Dispatch a custom event after navigation
                var event = $.Event('divi-booster:gallery-slide-changed');
                $thisGallery.trigger(event);
    });
});
</script>