Logo Slider Section

<section class="relative pt-9 pb-11 px-6 bg-gray-600">
    <div class="mx-auto">
        <div class="flex justify-between mb-9">

            <div class="text-white !mb-0 text-left h5 ">
                4.304 Kunden & Partner

            </div>

            <div>

                <a href="/" class="btn cursor-pointer inline-flex items-center text-white underline flex-row-reverse justify-end  rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

                    <span class="shrink-0">
                        alle Casestudies
                    </span>

                </a>
            </div>
        </div>

        <div x-data="{swiper: null}" x-init="const swiper = new Swiper($refs.container, {
    slidesPerView: 'auto',
    spaceBetween: 40,
    direction: 'horizontal', 
    centeredSlides: true,
    centeredSlidesBounds: true,
    loop: true,
    speed: 4000,
    effect: 'slide',
    autoplay: {
        enabled: true,
        delay: 0,
        disableOnInteraction: false,
      },
    breakpoints: {
        768: {
            spaceBetween: 60,
        },
        1200: {
            spaceBetween: 80,
        }
    }
        })">
            <div class="swiper !overflow-visible" x-ref="container">
                <div class="swiper-wrapper flex items-center !ease-linear">
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/BMZ-Gruppe.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/Continental_AG_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                    <div class="swiper-slide !w-auto !h-auto overflow-hidden relative">

                        <div class="relative h-full w-full ">
                            <img class="" src="/logos/ABB_logo.svg" alt="Alternativer Text" />

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>