HTML通过CDN引入Swiper轮播无法正常滑动的问题求助

你的代码存在3个核心问题，按顺序修正即可正常运行：

• 脚本执行顺序错误：Swiper初始化代码写在了Swiper JS资源引入之前，浏览器运行到new Swiper()逻辑时，Swiper构造函数还未被加载，会直接抛出JS错误，所有轮播逻辑都不会生效。
• 垂直轮播缺少必要高度配置：初始化参数中设置了direction: 'vertical'开启垂直滑动，该模式要求.swiper容器必须设置明确的固定高度，否则容器高度会被内部幻灯片完全撑开，无法触发滑动计算。
• 存在无效占位内容：幻灯片列表中的...是官网示例的省略占位符，不属于有效代码，建议删除避免出现多余的空白幻灯片。

1. 调整脚本加载顺序：将Swiper JS文件的引入标签移动到初始化代码的上方，确保资源加载完成后再执行初始化逻辑。
2. 按需配置轮播方向：如果需要常用的水平轮播，直接删除direction: 'vertical'配置项即可（Swiper默认就是水平滑动模式，不需要额外设置高度）；如果确实需要垂直轮播，给.swiper类添加固定高度样式，例如：

.swiper {
  width: 100%;
  height: 500px; /* 垂直模式必须设置明确高度 */
}

3. 删除幻灯片列表里的无效...占位符。

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
    <title>Swiper测试</title>
    <style>
        /* 启用垂直轮播时放开这段样式，水平轮播可删除
        .swiper {
            width: 100%;
            height: 500px;
        }
        */
        .swiper-slide {
            /* 幻灯片基础样式，方便预览效果 */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            background: #eee;
        }
    </style>
</head>

<body>

    <div class="dvHeader">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">About Me</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Gallery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Press Media</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Enquiry</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <br><br><br>
    <div class="dvSlider">
        <!-- Slider main container -->
        <div class="swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- If we need scrollbar -->
            <div class="swiper-scrollbar"></div>
        </div>
    </div>

    <!-- 先加载所有JS依赖库 -->
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 依赖加载完成后再执行Swiper初始化 -->
    <script>
        const swiper = new Swiper('.swiper', {
            // 启用垂直轮播时放开下面配置项，同时记得给.swiper容器设置高度
            // direction: 'vertical',
            loop: true,

            pagination: {
                el: '.swiper-pagination',
            },

            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            scrollbar: {
                el: '.swiper-scrollbar',
            },
        });
    </script>
</body>

</html>

内容的提问来源于stack exchange，提问作者me at stackoverflow