In my Angular project, I am using a p-carousel component and I want the carousel images to utilize the entire available horizontal space, or at least give me control over it. Additionally, I would like the ‘prev’ and ‘next’ navigation arrows to be positioned on top of the image, making use of the entire horizontal space. Below is the code I am currently using:

       <p-carousel 
            [value]="products" 
            [numVisible]="1" 
            [numScroll]="1" 
            [circular]="true" 
            [responsiveOptions]="responsiveOptions" 
            autoplayInterval="3500"
            class="custom-carousel">
            <ng-template let-product pTemplate="item">
                <div class="carousel-item flex align-items-center justify-content-center">
                    <div class="carousel-background" [ngStyle]="{'background-image': 'url(' + product.image + ')'}"></div>
                    <div class="carousel-overlay"></div>
                    <div class="carousel-content">
                        <div class="corner top-left"></div>
                        <div class="corner top-right"></div>
                        <div class="corner bottom-left"></div>
                        <div class="corner bottom-right"></div>
                        <h1 class="text-7xl text-white text-center">{{product.name}}</h1>
                        <p class="text-4xl text-white text-center">{{product.detalle}}</p>
                    </div>
                </div>
            </ng-template>
        </p-carousel>

However, I am having trouble positioning the ‘prev’ and ‘next’ arrows exactly as I want. My goal is for these arrows to be overlaid on the carousel image and utilize the entire horizontal space available. Could you please assist me in adjusting the CSS or HTML to achieve this? Any suggestions or advice would be greatly appreciated.”