JS

script Images Slide


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

                                                <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>
                                                <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>
                                                <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>
                                                <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>
                                                <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>
                                                <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>
                                                <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>
                                                <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>
                                                <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>
                                                <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>
                        
                    </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>
DEX WAT LEARN

LEARN FOR PHP WITH DEX WAT DEV

JS

script Images Slide

การเข้าชมเว็บไซต์ : 27,798 ครั้ง