使用swiper.js的轮播仅滑动部分幻灯片，且显示异常求助

问题根源 #

你添加的!important直接破坏了Swiper的核心布局逻辑：

• .person中的width: auto !important和height: auto !important，让Swiper无法正确计算幻灯片尺寸，导致布局错位、部分幻灯片不显示
• .swiper-wrapper的justify-content: center干扰了Swiper的滑动容器定位逻辑，引发随机卡顿
• 大量不必要的!important覆盖了Swiper的默认布局样式，导致组件内部计算混乱

修复方案 #

不需要修改全部CSS，只要移除破坏布局的!important，用选择器优先级替代!important来自定义样式即可：

1. 修改CSS样式（移除不必要的!important）

.swiper {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* 移除干扰Swiper布局的属性 */
/* .swiper-wrapper {
    justify-content: center;
} */

/* 用更高优先级的选择器覆盖，无需!important */
.swiper-slide.person {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    padding: 2rem;
    /* 移除width/height的!important，让Swiper自动计算尺寸 */
    justify-content: center;
}

.swiper-slide.person::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    box-shadow: 0 10px 15px rgb(0 0 0 / 20%);
    z-index: -1;
}

2. 优化Swiper初始化配置（控制间距和显示数量）

在初始化Swiper时，通过官方配置控制幻灯片间距和显示数量，替代自定义margin-right避免布局冲突：

const swiper = new Swiper('.swiper', {
    pagination: {
        el: '.swiper-pagination',
    },
    // 移动端自适应显示数量，设为'auto'则根据幻灯片宽度自动调整
    slidesPerView: 'auto',
    // 替代margin-right的间距配置（单位px，1rem≈16px）
    spaceBetween: 16,
    // 开启触摸滑动（移动端默认开启，可明确配置）
    touchEventsTarget: 'container',
});

关键说明 #

• Swiper的核心布局依赖对.swiper-slide的尺寸计算，不要强制用!important覆盖width/height属性
• 自定义样式时，使用.swiper-slide.你的类名这种组合选择器，优先级足够覆盖Swiper默认样式，无需!important
• 幻灯片间距、显示数量等布局需求，优先用Swiper官方配置实现，不要用自定义CSS硬改

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