同一HTML页面中多SwiperJS共存时swiper1失效问题求助

问题根源梳理 #

• 核心类缺失与错误命名：swiper1的容器未添加swiper核心类（Swiper依赖该类初始化样式与功能）；轮播项错误使用swiper-slide1，必须使用官方规定的swiper-slide类（可额外添加自定义类）。
• 选择器不匹配：swiper2的HTML容器使用mySwiper1类，但JS初始化时用.mySwiper2，导致无法匹配；同时swiper1的JS选择器与swiper2的容器类重复，引发初始化冲突。
• DOM结构不完整：swiper1的.swiper-wrapper及外层容器标签未闭合，造成DOM嵌套混乱，干扰Swiper初始化。
• 分页元素缺失：swiper1的JS配置了分页功能，但HTML中未添加对应的.swiper-pagination元素，影响功能生效。

修改后的完整代码 #

HTML代码

<!-- swiper1 Services Sections -->
<div class="service__container container">
    <div class="service__title">
        <h1>services</h1>
    </div>
    <!-- 补充swiper核心类，保留mySwiper1作为唯一标识 -->
    <div class="swiper swiper1 mySwiper1">
        <div class="swiper-wrapper">
            <!-- 轮播项使用官方要求的swiper-slide类，保留自定义card类 -->
            <div class="card swiper-slide">
                <img class="img__card" src="/img/Digital.png" alt="Avatar" style="width:100%">
                <div class="card__info">
                    <h4 class="card__title"><b>Our service one</b></h4>
                    <p class="card__suptitle">Our service two</p>
                </div>
            </div>
            <div class="card swiper-slide">
                <img class="img__card" src="/img/coding.png" alt="Avatar" style="width:100%">
                <div class="card__info">
                    <h4 class="card__title"><b>Lorem ipsum dolor sit, amet consectetur</b></h4>
                    <p class="card__suptitle">Lorem ipsum dolor sit, amet consectetur</p>
                </div>
            </div>
        </div>
        <!-- 添加分页元素，匹配JS配置 -->
        <div class="swiper-pagination"></div>
    </div>
</div>

<!-- swiper2 -->
<!-- 修改容器类为mySwiper2，与JS选择器对应，保留swiper核心类 -->
<div class="customers__container container swiper mySwiper2">
    <div class="swiper-wrapper customers__img">
        <img class="swiper-slide" src="/img/customers1.png" style="width:100%">
        <img class="swiper-slide" src="/img/custopmer2.png" style="width:100%">
        <img class="swiper-slide" src="/img/customer3.png" style="width:100%">
    </div>
</div>

JS代码

// 初始化swiper1，选择器对应HTML中的mySwiper1
var swiper1 = new Swiper(".mySwiper1", {
    effect: "cube",
    grabCursor: true,
    cubeEffect: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
    },
    pagination: {
        el: ".swiper-pagination",
    },
});

// 初始化swiper2，选择器对应HTML中的mySwiper2
var swiper2 = new Swiper(".mySwiper2", {
    effect: "cards",
    grabCursor: true,
});

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