Splide Logo Slider

by andyjh07

HTML

<!-- Slider -->
            <div class="mt-6 space-y-7 splide logo-slider">

                <div class="!overflow-visible splide__track">
                    <ul class="items-center splide__list">
                    <?php foreach ($slider as $logo): ?>
                            <?php if($logo['logo']): ?>
                                <li class="splide__slide">
                                    <div class="flex flex-col items-center gap-16 sm:flex-wrap sm:justify-center sm:flex-row sm:gap-16 2xl:gap-20">
                                        <?php if(str_ends_with($logo['logo'], '.svg')): ?>
                                        <div class="[&>svg]:fill-current w-full
                                            ZZ[&>svg]:max-w-[12rem] ZZ[&>svg]:max-h-[60px] [&>svg]:w-full [&>svg]:h-auto
                                            [&>svg]:text-black [&>svg]:hover:text-bb-dark-orange [&>svg]:transition-colors [&>svg]:focus:text-bb-dark-orange">
                                            <?= file_get_contents($logo['logo']); ?>
                                        </div>
                                        <?php else: ?>
                                        <div>
                                            <img class="max-w-[12rem] max-h-24 h-auto w-full opacity-80 hover:opacity-100 transition-opacity" src="<?= $logo['logo']; ?>"/>
                                        </div>
                                        <?php endif; ?>
                                    </div>
                                </li>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </ul>
                </div>

            </div>

JavaScript

if (document.querySelector(".logo-slider")) {
        new Splide('.logo-slider', {
            type: 'loop',
            pagination: false,
            drag: 'free',
            arrows: false,
            perPage: 5,
            gap: '80px',
            autoScroll: {
                speed: 1,
            },
            breakpoints: {
                639: {
                    perPage: 4,
                    gap: '18px',
                    autoScroll: {
                        speed: 0.5,
                    },
                },
                767: {
                    gap: '40px',
                    autoScroll: {
                        speed: 0.7,
                    },
                },
                1023: {
                    gap: '60px',
                },
            }
        }).mount({ AutoScroll });
    }