为何基础版Splide.js轮播代码无法正常运行？

核心问题定位 #

你的代码里存在类名拼写错误：所有轮播项的类名应该是splide__slide（双下划线），但你写成了splide_slide（单下划线）。Splide完全依赖这套双下划线命名的类体系来识别轮播结构、计算尺寸、绑定交互事件，类名错误会直接导致组件功能失效，出现只能拖动露出部分图片、切换按钮无响应的情况。

排查思路 #

• 核对核心类名：Splide的核心结构类均为双下划线命名（splide__track、splide__list、splide__slide），逐行检查HTML中这些类名的拼写，确保没有单下划线、漏写或多写字符的情况。
• 确认初始化代码执行：将初始化JS代码放到HTML末尾的<script>标签内（或确保外部JS文件正确引入并在DOM加载完成后执行），避免因DOM未加载完成导致初始化失败。
• 检查CSS生效状态：打开浏览器开发者工具的「Elements」面板，查看splide__track、splide__slide等元素是否加载了Splide的默认样式，若样式为空则说明CSS文件未正确加载。
• 验证元素尺寸：在开发者工具中检查splide__slide的宽度是否与轮播容器宽度一致，若宽度异常（比如被压缩成极小值），基本可以确定是类名错误导致CSS未生效。

修正后的代码 #

完整代码

<html>
    <head>         
        <meta charset="UTF-8">
        <title>Splide test</title>
        <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">        
    </head>
    <body>
        <section id="splide" class="splide" aria-label="Splide Basic HTML Example">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">         
                        <img alt="one" src="https://zaydite.com/images/uploads/42/181/one.jpg">                    
                    </li>
                    <li class="splide__slide">
                        <img alt="two" src="https://zaydite.com/images/uploads/42/181/two.jpg">                  
                    </li>
                    <li class="splide__slide">
                        <img alt="three" src="https://zaydite.com/images/uploads/42/181/three.jpg">                        
                    </li>
                    <li class="splide__slide">      
                        <img alt="four" src="https://zaydite.com/images/uploads/42/181/four.jpg">
                    </li>
                    <li class="splide__slide">                
                        <img alt="five" src="https://zaydite.com/images/uploads/42/181/five.jpg">
                    </li>
                </ul>
            </div>
        </section>
        <script>
            document.addEventListener( 'DOMContentLoaded', function() {
                var splide = new Splide( '.splide').mount();
            } );
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Orbiting Eden