Logo Slider

<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>