File "newp.html"

Full path: /home/fsibplc/public_html/resources/newp.html
File size: 3.33 B (3.33 KB bytes)
MIME-type: text/html
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>what New</title>
    <!-- splide css cdn -->
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide.min.css">
    <!-- custom css -->
    <style>
        .img_box img {
            max-width: 100%;
        }
    </style>

</head>

<body>
    <div class="container-fluid">
        <div class="splide">
            <div class="splide__track">
                <div class="splide__list">
                    <div class="splide__slide">
                        <div class="img_box">
                            <img src="image/img-1.jpg" alt="pic-1">
                        </div>
                    </div>
                    <div class="splide__slide">
                        <div class="img_box">
                            <img src="image/img-2.jpg" alt="pic-1">
                        </div>
                    </div>
                    <div class="splide__slide">
                        <div class="img_box">
                            <img src="image/img-1.jpg" alt="pic-1">
                        </div>
                    </div>
                    <div class="splide__slide">
                        <div class="img_box">
                            <img src="image/img-2.jpg" alt="pic-1">
                        </div>
                    </div>
                    <div class="splide__slide">
                        <div class="img_box">
                            <img src="image/img-1.jpg" alt="pic-1">
                        </div>
                    </div>
                    <div class="splide__slide">
                        <div class="img_box">
                            <img src="image/img-2.jpg" alt="pic-1">
                        </div>
                    </div>
                    <div class="splide__slide">
                        <div class="img_box">
                            <img src="image/img-1.jpg" alt="pic-1">
                        </div>
                    </div>
                    <div class="splide__slide">
                        <div class="img_box">
                            <img src="image/img-2.jpg" alt="pic-1">
                        </div>
                    </div>
                    <div class="splide__slide">
                        <div class="img_box">
                            <img src="image/img-1.jpg" alt="pic-1">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/js/splide.min.js"></script>
    <script>
        var splide = new Splide('.splide', {
            perPage: 4,
            perMove: 1,
            gap: '1.5rem',
            padding: '3rem',
            type: 'loop',
            autoplay: 'true',
            breakpoints: {
                640: {
                    perPage: 2,
                    gap: '.7rem',

                },
                480: {
                    perPage: 1,
                    gap: '.7rem',

                },
            },
        });

        splide.mount();
    </script>
</body>

</html>