Swiper JS使用问题：添加3张图片仅显示1张且仅可滑动1次

你的代码存在三个关键错误，直接导致轮播仅显示1张图且滑动异常：

1. Slide类名拼写错误 #

后两个轮播项的类名写成了swipper-slide（多了一个字母p），Swiper只会识别swiper-slide类名的元素，因此这两个项无法被纳入轮播队列。
修复：将后两个<div>的类名统一改为swiper-slide。

2. Swiper初始化语法错误 #

初始化配置中的分页器部分缺少pagination键名，结构混乱，导致配置不生效。
修复：将分页器配置正确嵌套在pagination属性下，同时移除多余的语法逗号。

3. 可选优化：图片布局调整 #

当前直接给img设置宽高50%可能导致图片拉伸或布局溢出，建议给图片添加object-fit: cover属性保证比例。

修复后的完整代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
</head>
<body>
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }
        .swiper {
            width: 50%;
            height: 50%;
        }
        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保证图片比例，避免拉伸变形 */
        }
        .swiper-slide {
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src='img/h_logo.png'></div>
            <div class="swiper-slide"><img src="img/2Q.png"></div>
            <div class="swiper-slide"><img src="img/shapkanew.jpg"></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                dynamicBullets: true,
            }, 
        });
    </script>
</body>
</html>

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