如何实现Swiper.js滑块左对齐且溢出容器的效果？

1. 调整Swiper初始化参数 #

核心是让滑块宽度自适应内容，同时允许溢出，初始化时加上这些配置：

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto', // 滑块宽度随内容自适应，不强制均分容器
  spaceBetween: 20, // 滑块间的间距，按需调整数值
  freeMode: true, // 允许自由滑动，不强制锁定到某一滑块位置（需要拖动功能的话加）
  // 按需添加导航组件
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

2. 配置关键CSS样式 #

重点是禁止滑块被压缩，确保左对齐且溢出容器：

.swiper-container {
  width: 100%;
  position: relative;
  overflow-x: hidden; /* 隐藏右侧溢出部分，要滚动条就换成overflow-x: auto */
}

.swiper-slide {
  flex-shrink: 0; /* 绝对不能丢！防止滑块被压缩变形 */
  width: auto; /* 让滑块宽度由内部内容撑开 */
}

额外提示 #

• 滑块内的图片记得加max-width: 100%，避免超出滑块范围
• 如果需要滑动结束后自动对齐最近滑块，可以在初始化参数里加freeModeSticky: true

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