How to align the carousel with the background? (Tailwind CSS / Flowbite.js) it gets cut to the top

So, I want to get the carousel aligned with the background. I'm using flowbite for that but, the top is just getting cut when I tried to make the images get bigger in height

also, I want to get the images to fill the white background

https://i.imgur.com/6faotzr.png

Is there any solution to my problem? should I use another library o seek another form to create a carousel?

<div style="background-image: url(multimedia/FondoDeslizador.png)" class="bg-local bg-no-repeat bg-cover">         
    <div id="default-carousel" class="relative pt-96" data-carousel="relative">
        <!-- Carousel Contenedor -->
        <div class="overflow-hidden relative h-56 rounded-lg py-72">
             <!-- Item 1 -->
            <div class="hidden duration-700 ease-in-out" data-carousel-item>
                <img src="multimedia/Desli 1.png" class="block absolute top-1/3 left-1/2 w-fit h-fit -translate-x-1/2 -translate-y-1/2" alt="...">
            </div>
            <!-- Item 2 -->
            <div class="hidden duration-700 ease-in-out" data-carousel-item>
                <img src="multimedia/Desli 2.png" class="block absolute top-1/3 left-1/2 w-fit h-fit -translate-x-1/2 -translate-y-1/2" alt="...">
            </div>

            <!-- Item 3 -->
            <div class="hidden duration-700 ease-in-out" data-carousel-item> <!--Checar-->
                <img src="multimedia/Desli 9.png" class="block absolute top-1/3 left-1/2 w-fit h-fit -translate-x-1/2 -translate-y-1/2" alt="...">
            </div>

            <div class="hidden duration-700 ease-in-out" data-carousel-item>
                <img src="multimedia/Desli 4.png" class="block absolute top-1/3 left-1/2 w-fit h-fit -translate-x-1/2 -translate-y-1/2" alt="...">
            </div>

            <div class="hidden duration-700 ease-in-out" data-carousel-item>
                <img src="multimedia/Desli 5.png" class="block absolute top-1/3 left-1/2 w-fit h-fit -translate-x-1/2 -translate-y-1/2" alt="...">
            </div>

            <div class="hidden duration-700 ease-in-out" data-carousel-item>
                <img src="multimedia/Desli 6.png" class="block absolute top-1/3 left-1/2 w-fit h-fit -translate-x-1/2 -translate-y-1/2" alt="...">
            </div>

            <div class="hidden duration-700 ease-in-out" data-carousel-item>
                <img src="multimedia/Desli7.png" class="block absolute top-1/3 left-1/2 w-fit h-fit -translate-x-1/2 -translate-y-1/2" alt="...">
            </div>
        </div>
        <!-- Slider indicadores (Puntos) -->
        <div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
            <button type="button" class="w-6 h-6 rounded-full" aria-current="false" aria-label="Slide 1" data-carousel-slide-to="0"></button>
            <button type="button" class="w-6 h-6 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
            <button type="button" class="w-6 h-6 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
            <button type="button" class="w-6 h-6 rounded-full" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
            <button type="button" class="w-6 h-6 rounded-full" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
            <button type="button" class="w-6 h-6 rounded-full" aria-current="false" aria-label="Slide 6" data-carousel-slide-to="5"></button>
            <button type="button" class="w-6 h-6 rounded-full" aria-current="false" aria-label="Slide 7" data-carousel-slide-to="6"></button>
        </div>
        <!-- Slider controles -->
        <button type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
            <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                <span class="hidden">Previous</span>
            </span>
        </button>
        <button type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next>
            <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                <span class="hidden">Next</span>
            </span>
        </button>
    </div>
</div>
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum