SwiperJS技术问题：桌面显4个固定宽幻灯片，移动端居中激活项

核心需求回顾：

• 桌面端固定显示4个宽度280px的幻灯片，间距32px
• 移动端/平板端需实现：
  • 激活状态的幻灯片居中显示
  • 点击分页指示器切换后，新激活的幻灯片自动居中

修改方案 #

1. 调整Swiper JavaScript配置

关键修改：启用居中模式、适配多屏幕显示规则、修复loop模式下分页点击的定位偏差

var swiper = new Swiper(".carousel-cards", {
    keyboard: {
        enabled: true,
        onlyInViewport: false,
    },
    loop: true,
    mousewheel: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    slidesPerView: 'auto', // 自动适配屏幕宽度，保留slide固定尺寸
    spaceBetween: 32,
    centeredSlides: true, // 开启居中模式
    pagination: {
        el: ".swiper-pagination",
        dynamicBullets: true,
        dynamicMainBullets: 1, // 适配单居中slide的分页指示器样式
        clickable: true
    },
    updateOnWindowResize: true,
    // 断点适配不同屏幕尺寸
    breakpoints: {
        992: {
            slidesPerView: 4, // 桌面端固定显示4个slide
            centeredSlides: false // 桌面端保持左对齐布局
        }
    },
    // 修复loop模式下分页点击的定位偏差
    on: {
        paginationClick: function(swiper, pagination, clickedIndex) {
            var realIndex = clickedIndex - swiper.loopedSlides;
            swiper.slideTo(realIndex, 300, true);
        }
    }
});

2. 补充CSS适配样式

确保移动端容器有合理边距，让居中幻灯片前后能露出部分内容，避免布局溢出：

.carousel-cards {
    margin: 0 auto;
    overflow: hidden;
    /* 添加左右内边距，让居中slide前后显示部分内容 */
    padding: 0 16px;
}

.swiper-wrapper {
    width: auto; /* 自适应内容宽度，配合slidesPerView:auto */
}

/* 桌面端移除内边距，保持原有布局 */
@media (min-width: 992px) {
    .carousel-cards {
        padding: 0;
        width: 80%;
    }
}

效果说明 #

• 移动端/平板端：激活幻灯片自动居中，左右露出相邻幻灯片的部分内容，强化视觉聚焦
• 分页指示器点击后，准确定位到对应幻灯片并保持居中状态
• 桌面端保留原有4个幻灯片并排的布局，不破坏原有需求

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