首次使用Swiper组件遇脚本失效问题求助

你代码里有两个关键问题导致Swiper不工作：

• 结构类名拼写错误：你把Swiper必填的容器类名写成了swiper-warpper，正确的应该是swiper-wrapper——少了一个字母a，Swiper无法识别这个核心容器，自然无法初始化轮播功能。
• 缺失Swiper样式文件：只引入了Swiper的JS文件，但没加载对应的CSS，这会导致轮播布局混乱，甚至功能失效。

修正后的完整代码如下：

<div class="home" id="home">
    <div class="swiper homeSlider">
        <!-- 修正类名：swiper-warpper → swiper-wrapper -->
        <div class="swiper-wrapper warpper">
            <div class="swiper-slide slide slide1">
                <div class="content">
                    <img src="#" alt="#">
                    <h3>Ipsum latum</h3>
                    <h1>Ipsum latum</h1>
                    <p>ispum latum</p>
                    <a href="#" class="btn">Réserver</a>
                </div>
            </div>
            <div class="swiper-slide slide slide2">
                <div class="content">
                    <img src="#" alt="#">
                    <h3>RACLETTE</h3>
                    <h1>Plat savoyard</h1>
                    <p>Venez goûter ce plat typique de la Savoie</p>
                    <a href="#" class="btn">Réserver</a>
                </div>
            </div>    
            <div class="swiper-slide slide slide3">
                <div class="content">
                        <img src="#" alt="#">
                        <h3>RACLETTE</h3>
                        <h1>Plat savoyard</h1>
                        <p>Venez goûter ce plat typique de la Savoie</p>
                        <a href="#" class="btn">Réserver</a>
                </div>
            </div>        
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>

<!-- 新增引入Swiper的CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<script>
var swiper = new Swiper(".homeSlider", {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
        delay: 7500,
        disableOnInteraction: false,
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    loop: true,
}); 
</script> 
</body>
</html>

按以上修改后，Swiper就能正常初始化并运行了。

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