swiper slider移动端响应式异常，Safari/火狐浏览器适配问题咨询

修复方案 #

适配问题主要由CSS语法错误、固定宽度配置、缺失浏览器兼容属性导致，具体调整如下：

• 修复CSS语法错误：将按钮颜色配置中错位的!important移动到分号前，避免Safari、火狐浏览器忽略整行样式
• 调整容器宽度适配规则：将.swiper-container的固定宽度65%修改为最大宽度限制，配合自适应边距实现不同屏幕下的响应式表现，可添加媒体查询针对移动端单独调整宽度
• 放开滑块内图片的宽度限制：解除width: 100%的注释，确保图片占满滑块容器，避免溢出
• 补充兼容属性：为object-fit添加webkit前缀适配旧版iOS Safari，为滑块元素添加flex-shrink: 0避免火狐下flex布局自动收缩
• JS配置添加兼容参数：添加roundLengths: true配置，解决Safari下像素小数计算导致的滑块错位问题

修正后JS代码

var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    roundLengths: true,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    breakpoints: {
        768: {
            spaceBetween: 20
        },
        375: {
            spaceBetween: 10
        }
    }
});

修正后CSS代码

.swiper {
    height: 100%;
    border-radius: 20px;
}

.swiper-slide {
    width: 100%;
    flex-shrink: 0;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-object-fit: cover;
    object-fit: cover;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
    color: #ffffff !important;
}

.swiper-container{
    max-width: 65%;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .swiper-container {
        max-width: 92%;
    }
}

原有HTML结构无需调整

<section class="swiper-container">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="#">
                    <img src="*"  alt="*">
                </a>
            </div>
            @endfor
        @endif
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
    </div>
</section>

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