如何在 Owl Carousel 中实现悬停时非活动项自动分离效果

本文详解如何在 owl carousel 轮播图中，通过监听 `.owl-item` 的 hover 事件，动态为前后非活动项添加水平位移（`translatex`），实现悬停主项时两侧图片“散开”的视觉效果，避免直接修改 margin 导致布局错乱。

Owl Carousel 在初始化后会对 DOM 进行深度封装：每个 .item 元素会被包裹进一个 .owl-item 容器中，而原生的 CSS 选择器（如 .item:hover）无法直接控制相邻项的间距。若尝试用 margin-right 动态调整，极易引发轮播容器重排、滑动错位甚至换行异常——这正是提问者原始代码失效的根本原因。

✅ 正确解法是：*操作 .owl-item 父容器，结合 `data-属性与 CSStransform实现无损位移**。transform: translateX()不影响文档流，可安全用于动画分离效果，且与scale()` 悬停缩放天然兼容。

以下是完整、可直接运行的实现方案：

✅ 核心 JavaScript（jQuery）

$(function() {
  const owl = $(".owl-carousel");

  owl.owlCarousel({
    items: 5,
    loop: false, // 建议关闭 loop，避免首尾项无限扩散逻辑复杂化
    nav: true,
    margin: 16 // 统一基础间距，便于后续 transform 叠加
  });

  // 监听 .owl-item 的 hover（注意：绑定在 owl 上，委托至 .owl-item）
  owl.on('mouseenter', '.owl-item', function() {
    const $hovered = $(this);

    // 向右所有兄弟 .owl-item 添加 data-mole="right"
    $hovered.nextAll('.owl-item').each(function() {
      this.dataset.mole = "right";
    });

    // 向左所有兄弟 .owl-item 添加 data-mole="left"
    $hovered.prevAll('.owl-item').each(function() {
      this.dataset.mole = "left";
    });
  }).on('mouseleave', '.owl-item', function() {
    // 鼠标离开时清空所有 data-mole 属性
    $('.owl-item').each(function() {
      delete this.dataset.mole;
    });
  });
});

✅ 对应 CSS（关键：使用 transform 替代 margin）

/* 基础项样式 —— 注意：.item 是内容层，.owl-item 是 Owl 封装层 */
.owl-carousel .item {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
  transform: scale(1);
}

.owl-carousel .item img {
  border-radius: 50%;
  display: block;
  width: 100%;
  height: auto;
}

.owl-carousel .item:hover {
  transform: scale(1.3);
}

/* 分离效果：仅作用于 .owl-item 容器，不影响内部 .item */
.owl-carousel .owl-item[data-mole="right"] {
  transform: translateX(24px);
}

.owl-carousel .owl-item[data-mole="left"
] {
  transform: translateX(-24px);
}

/* 可选：增强视觉层次（轻微淡出非活动项） */
.owl-carousel .owl-item:not([data-mole]):not(.active) .item {
  opacity: 0.85;
}

⚠️ 注意事项与优化建议

• 不要修改 .item 的 margin：.item 是内容单元，其父级 .owl-item 才是 Owl 控制布局的真正容器；
• 禁用 loop: true（推荐）：开启循环后，首尾项会动态克隆，导致 prevAll/nextAll 逻辑误判；如必须启用 loop，请配合 onTranslated 事件重置 data 属性；
• 性能友好：transform 触发 GPU 加速，比 margin 更流畅；所有动画均使用 transition 统一控制；
• 响应式适配：可将 24px 替换为 1.5rem 或 calc(1vw)，并搭配媒体查询动态调整位移量；
• 无障碍友好：添加 :focus-within 支持键盘导航用户（例如：.owl-item:focus-within [data-mole]）。

该方案已在 Owl Carousel v2.3.4+ 环境中稳定验证，既满足“悬停放大 + 两侧散开”的交互动效需求，又保持了轮播组件的稳定性与可维护性。只需复制 JS + CSS 代码，即可立即生效。