disable the prev button if carousel on first slide, and add class 'nav-disabled' to button for styling it when disabled.

code.js

jQuery(document).ready(function($) {

    if($('html').attr('ng-app') == 'CTFrontendBuilder') return;
    
    var $carouselElement = $("#%%ELEMENT_ID%%");
    var carousel = $carouselElement.find($carouselElement.children().data("carousel"));
    
    if (carousel && carousel.length) {
        
        var $carouselInner = $carouselElement.find('.oxy-carousel-builder_inner');
        var prevArrowSelector = $carouselInner.data('prev');
        
        if (!prevArrowSelector) {
            return;
        }
        
        var $prevArrow = $(prevArrowSelector);
        
        function updateArrowState(index) {
            // If we're on the first slide (index 0), disable the prev arrow
            if (index === 0) {
                $prevArrow.addClass('nav-disabled');
                $prevArrow.attr('tabindex', '-1');
                $prevArrow.attr('aria-disabled', 'true');
                $prevArrow.css('pointer-events', 'none');
                
                if ($prevArrow.is(':focus')) {
                    $prevArrow.blur();
                }
            } else {
                $prevArrow.removeClass('nav-disabled');
                $prevArrow.attr('tabindex', '0');
                $prevArrow.attr('aria-disabled', 'false');
                $prevArrow.css('pointer-events', '');
            }
        }
        
        // Listen for slide changes
        carousel.on("change.flickity", function(event, index) {
            updateArrowState(index);
        });
        
        // Run on Flickity ready
        carousel.on("ready.flickity", function() {
            var flktyInstance = Flickity.data(carousel[0]);
            if (flktyInstance) {
                updateArrowState(flktyInstance.selectedIndex);
            }
        });
    }
});