<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.6.12/dist/css/splide.min.css">
<div class="container">
    <div class="row">
        <div class="splide">
            <div class="splide__track">
                <div class="splide__list">

                    <?php
                        for($i=0;$i<10;$i++){
                    ?>
                            <div class="col-lg-4 splide__slide">
                                <div style="background-color:#c4c2bb;height:200px;">
                                    รูป
                                </div>
                                <div style="background-color: #4270ed;color: aliceblue;padding: 10px;">
                                    <b class="m-0" class="MyWebFontthhead" style="color: white;font-size:15px;">
                                        หัวข้อ <br><br>
                                    </b>
                                    <p style="font-size:15px;">
                                        รายละเอียด
                                    </p>
                                </div>
                            </div>
                        <?php
                        }
                        ?>

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.6.12/dist/js/splide.min.js"></script>
<script>
    var splide = new Splide('.splide', {
        type: 'loop',
        perPage: 3,
        rewind: true,
        breakpoints: {
            640: {
                perPage: 2,
                gap: '.7rem',
            },
            480: {
                perPage: 1,
                gap: '.7rem',
            },
        },
    });
    splide.mount();
</script>