Splide Grid扩展添加异常求助：滑块未显示网格效果

我正在尝试添加Splide Grid扩展，已经引入了jquery.min.js?v=3.7.0和splide-extension-grid.min.js?v=1，并按照官方文档配置了Grid功能，但滑块始终没有网格效果，不确定window.splide.Grid的使用是否正确。

我的JS代码 #

jQuery(function($){

/*import Splide from "https://cdn.skypack.dev/@splidejs/splide@2.4.21"
import Grid from "https://cdn.skypack.dev/@splidejs/splide-extension-grid@0.2.0"*/

new Splide( '#exmpale-slick', {
    type: 'loop', // 滑块类型
    height: '20rem', // 滑块高度
    gap: '1em', // 滑块间距
    perPage: 2, // 每页显示滑块数
    perMove: 1, // 每次移动滑块数
    grid: {
        dimensions: [ [ 2, 0.5 ], [ 2, 2 ], [ 2, 1 ]], // 网格尺寸集合
        gap: { // 行列间距
            row: '1em',
            col: '1em'
        }
    },
    breakpoints: {  // 断点配置
        600: {
            height: '10rem',
            perPage: 1,
            grid: {
                dimensions: [ [ 2, 2 ], [ 1, 1 ], [ 2, 1 ], [ 1, 2 ], [ 2, 2 ], [ 1, 3 ], [ 3, 1 ] ],
                gap: {
                    row: '.5em',
                    col: '.5em'
                }
            }
        }
    }
} ).mount( window.splide.Grid );

});

我的HTML代码 #

<section class="Gridwraper">
    <div class="GridSet">
        <div class="Gridset view view-new ">
            <div class="view-header">
                <p>Title</p>
            </div>
            <div class="splide" id="exmpale-slick">
                <div class="splide__track">
                    <ul class="splide__list">
                        <li class="p-splide__slide splide__slide">
                            <a href="https://www.example.com">
                                <span class="_img-lbl">
                                    <h3> image label 1 </h3>
                                </span>
                                <p class="img-txt">image text 1</p>
                                <img loading="lazy" class="img-full" src="image1.jpg" alt="">
                            </a>
                        </li>
                        <li class="p-splide__slide splide__slide">
                            <a href="https://www.example.com">
                                <span class="_img-lbl">
                                    <h3> image label 2 </h3>
                                </span>
                                <p class="img-txt">image text 2</p>
                                <img loading="lazy" class="img-full" src="image2.jpg" alt="">
                            </a>
                        </li>
                        <li class="p-splide__slide splide__slide">
                            <a href="https://www.example.com">
                                <span class="_img-lbl">
                                    <h3> image label 3 </h3>
                                </span>
                                <p class="img-txt">image text 3</p>
                                <img loading="lazy" class="img-full" src="image3.jpg" alt="">
                            </a>
                        </li>
                        <li class="p-splide__slide splide__slide">
                            <a href="https://www.example.com">
                                <span class="_img-lbl">
                                    <h3> image label 4 </h3>
                                </span>
                                <p class="img-txt">image text 4</p>
                                <img loading="lazy" class="img-full" src="image4.jpg" alt="">
                            </a>
                        </li>
                        <li class="p-splide__slide splide__slide">
                            <a href="https://www.example.com">
                                <span class="_img-lbl">
                                    <h3> image label 5 </h3>
                                </span>
                                <p class="img-txt">image text 5</p>
                                <img loading="lazy" class="img-full" src="image5.jpg" alt="">
                            </a>
                        </li>
                        <li class="p-splide__slide splide__slide">
                            <a href="https://www.example.com">
                                <span class="_img-lbl">
                                    <h3> image label 6 </h3>
                                </span>
                                <p class="img-txt">image text 6</p>
                                <img loading="lazy" class="img-full" src="image6.jpg" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

我已经尝试过手动调用jQuery，但问题依旧。

1. 补充引入核心Splide库 #

你只引入了jQuery和Grid扩展，缺少核心Splide库。Grid扩展依赖Splide核心才能运行，必须先引入对应版本的Splide CSS和JS文件：

<!-- 引入Splide样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/css/splide.min.css">
<!-- 引入Splide核心脚本 -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/js/splide.min.js"></script>
<!-- 最后引入Grid扩展 -->
<script src="splide-extension-grid.min.js?v=1"></script>

2. 修正扩展挂载方式 #

UMD版本的Grid扩展会挂载到Splide全局对象的Extensions属性下，而非window.splide，所以挂载代码需要修改为：

.mount( Splide.Extensions.Grid );

3. 调整网格配置的合理性 #

• 初始配置的dimensions总单元格数为2*0.5 + 2*2 + 2*1 =7，但你只有6个滑块，数量不匹配会导致布局异常，建议调整dimensions让总单元格数和滑块数对齐，或者补充滑块数量。
• 断点600px下的dimensions总单元格数达19，远大于现有滑块数，会造成布局混乱，需要重新设计尺寸组合。

4. 验证DOM元素ID正确性 #

确认JS中使用的#exmpale-slick和HTML中的ID完全一致（注意拼写是否有误），避免因ID不匹配导致初始化失败。

按以上步骤调整后，Grid扩展即可正常显示网格效果。

内容的提问来源于stack exchange，提问作者Pankaj Kumar