Owl Carousel自定义轮播布局问题：图片重叠且无法添加间距

我想用Owl Carousel创建自定义轮播布局，目前遇到图片重叠、无法添加间距的问题。目标是实现中心图片放大、两侧图片依次缩小的层级效果，但当前轮播的图片堆叠在一起，达不到预期样式。

现有代码 #

HTML #

<div class="section-padding">
    <div class="screenshot_slider owl-carousel owl-theme">
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
        <div class="item">
            <img src="SomeImage.jpg" alt="">
        </div>
    </div>
</div>

CSS #

.section-padding {
  padding: 80px 0;
}

.owl-item .item {
  transform: translate3d(0, 0, 0); /* 3D加速优化 */
  // transition: all .25s ease-in-out;
  margin: 50px 0; /* 覆盖插件默认边距 */
}

.screenshot_slider .owl-item .item img {
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  transition: 0.3s;
  transform: scale(0.8);
}

// .screenshot_slider .owl-item.center{
//   margin-left: 90px;
//   margin-right: 90px;
// }

.screenshot_slider .owl-item.center .item img {
  transform: scale(1.3);
}

/* 居中项的相邻兄弟项 */
.screenshot_slider .owl-item:has(+ .owl-item.active.center) .item img, /* 前一个兄弟项 */
.screenshot_slider .owl-item.active.center + .owl-item .item img {
  /* 后一个兄弟项 */
  transform: scale(1.1);
}

.screenshot_slider .owl-nav {
  text-align: center;
  // margin: 40px 0;
}

.screenshot_slider .owl-item:last-child { /* 移除最后一项的右边距 */
  margin-right: 0; 
}

.screenshot_slider .owl-nav button {
  font-size: 24px !important;
  margin: 10px;
  color: #033aff !important;
}

JavaScript #

$('.screenshot_slider').owlCarousel({
    center: true,
    loop:true,
    margin:10,
    dots: false,
    stagePadding: 200,
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 3
        },
        1200: {
            items: 3
        }
    }
});

问题原因与修复方案 #

核心问题 #

1. 插件配置的margin值过小，无法为图片提供足够间距
2. 图片缩放时未设置transform-origin，导致缩放区域超出自身容器，引发重叠
3. stagePadding未做响应式适配，移动端显示异常
4. 自定义.item的margin与插件自带间距逻辑冲突

修改后的代码 #

JavaScript（调整轮播配置）

$('.screenshot_slider').owlCarousel({
    center: true,
    loop: true,
    margin: 30, // 增大间距，避免图片重叠
    dots: false,
    stagePadding: 150,
    responsive: {
        0: {
            items: 1,
            stagePadding: 50 // 移动端适配更小的边距
        },
        600: {
            items: 3,
            stagePadding: 100
        },
        1200: {
            items: 3,
            stagePadding: 200
        }
    }
});

CSS（修正缩放与间距逻辑）

.section-padding {
  padding: 80px 0;
}

.owl-item .item {
  transform: translate3d(0, 0, 0);
  padding: 50px 0; /* 改用padding替代margin，避免和插件间距冲突 */
  transform-origin: center center; /* 设置缩放原点为中心，防止偏移 */
}

.screenshot_slider .owl-item .item img {
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  transition: 0.3s ease;
  transform: scale(0.8);
  width: 100%; /* 确保图片自适应容器宽度 */
}

.screenshot_slider .owl-item.center .item img {
  transform: scale(1.2); /* 适度减小缩放比例，避免超出容器 */
}

/* 居中项的相邻兄弟项 */
.screenshot_slider .owl-item:has(+ .owl-item.active.center) .item img,
.screenshot_slider .owl-item.active.center + .owl-item .item img {
  transform: scale(1); /* 调整相邻项缩放，保持层级感的同时避免重叠 */
}

.screenshot_slider .owl-nav {
  text-align: center;
}

.screenshot_slider .owl-nav button {
  font-size: 24px !important;
  margin: 10px;
  color: #033aff !important;
}

关键修改说明 #

• 依赖Owl Carousel自带的margin属性设置轮播项间距，避免手动设置margin引发的布局冲突
• 为.item添加transform-origin: center center，确保图片缩放时仅在自身容器内变化，不会覆盖相邻项
• 为不同屏幕尺寸配置对应的stagePadding，保证移动端和桌面端的显示一致性
• 适度降低中心图片的缩放比例，避免过大的尺寸超出容器范围导致重叠

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