如何在OWL Carousel v1.3.3中让容器内宽图仅显示中间区域（移动端）

刚好在维护老项目时遇到过一模一样的场景——移动端下容器是可视区宽度（比如500px），图片设了width:auto后实际宽度远超容器，要让图片只展示中间区域，用OWL Carousel v1.3.3可以这么修复：

1. 给轮播容器和滑块项设置基础样式 #

首先确保外层轮播容器和每个滑块项开启溢出隐藏，同时给滑块项设置定位上下文，为后续图片居中做准备：

.owl-carousel {
  width: 100%; /* 占满可视区宽度 */
  overflow: hidden;
}

.owl-item .item {
  position: relative;
  width: 100%;
  height: auto; /* 也可根据需求设固定高度 */
  overflow: hidden;
}

2. 让图片水平居中并裁剪超出部分 #

针对滑块内的图片，通过绝对定位+平移实现水平居中，这样图片超出容器的左右部分会被自动裁剪，只保留中间核心区域：

.owl-item .item img {
  width: auto; /* 保持图片原有宽度 */
  max-width: none; /* 取消可能的最大宽度限制，确保图片能显示完整宽度 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%; /* 若需图片高度适配容器可设这个，自适应高度则改为auto */
}

小提示：如果轮播是固定高度，设置height:100%能让图片同时垂直居中；如果是自适应高度，保留height:auto即可，只做水平居中裁剪。

3. 调整OWL Carousel初始化配置（可选） #

如果轮播出现布局偏移，检查初始化参数，确保滑块宽度和容器严格匹配：

$(".owl-carousel").owlCarousel({
  items: 1, // 移动端一般单滑块展示
  slideWidth: $(window).width(), // 强制滑块宽度等于可视区宽度
  autoPlay: false,
  navigation: false,
  pagination: true
});

这样设置后，不管图片实际宽度有多大，都会自动居中显示，超出容器的左右部分被隐藏，完美适配移动端可视区宽度。

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