Basic splideJS

by andyjh07

HTML

<div id="splide-dive-deeper" class="splide lg:hidden">
        <div class="splide__track">
            <div class="splide__list">
                <?php foreach($diveDeeperColumns as $column): ?>
                <a target="<?php echo $column['link']['target']; ?>" href="<?php echo $column['link']['url']; ?>" class="w-full bg-white rounded-lg overflow-clip splide__slide"">
                    <?php echo wp_get_attachment_image($column['image']['ID'], '576px w-full object-cover border-b border-fc-grey-light'); ?>
                    <div class="px-8 py-5 bg-white">
                        <h3 class="text-lg"><strong><?php echo $column['title']; ?></strong></h3>
                        <p class="inline-block mt-2 font-bold text-left underline text-nowrap text-fc-green"><?php echo $column['link']['title']; ?> <i class="fa-solid fa-angle-right"></i></p>
                    </div>
                </a>
                <?php endforeach; ?>
            </div>
        </div>
    </div>

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    // Initialize Splide for Dive Deeper block if the element exists
    if (document.getElementById('splide-dive-deeper')) {
        new Splide('#splide-dive-deeper', {
            type: 'loop',
            perPage: 4,
            breakpoints: {
                640: {
                    perPage: 1
                },
                1024: {
                    perPage: 2
                }
            },
            arrows: false,
            padding: { left: 30, right: 30 },
            gap: 20,
            pagination: true
        }).mount();
    }
});