Owl Carousel悬停时调整非活跃项间距问题求助

我用Owl Carousel展示图片，当前鼠标悬停图片时图片会放大，想新增效果：悬停活跃项时，让非活跃项分散开。

我尝试了以下代码，但未能生效：

items.forEach((item, index) => {
  item.addEventListener('mouseenter', () => {
    items.forEach((item, i) => {
      if (i !== index) {
        item.style.marginRight = '50px';
      } else {
        item.style.marginRight = '30px';
      }
    });
  });

  item.addEventListener('mouseleave', () => {
    items.forEach((item) => {
      item.style.marginRight = '10px';
    });
  });
});

我的轮播完整代码如下：

JavaScript 代码 #

$(function() {
  var owl = $(".owl-carousel");
  owl.owlCarousel({
    items: 5,
   
    loop: true,
    nav: true
  });
});

CSS 代码 #

.owl-carousel .item {
  display: inline-block;
  margin-right: 10px;
  transition: all 0.3s ease-in-out;
  border-radius : 50%;
}

.owl-carousel .item img {
  border-radius : 50%;
}

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

HTML 代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="carousel-wrapper">
  <div class="owl-carousel">
    <div class="item active">
      <img src="http://placekitten.com/300/300" alt="Image 1">
    </div>
    <div class="item">
      <img src="http://placekitten.com/300/300" alt="Image 2">
    </div>
    <div class="item">
      <img src="http://placekitten.com/300/300" alt="Image 3">
    </div>
    <div class="item">
      <img src="http://placekitten.com/300/300" alt="Image 4">
    </div>
    <div class="item">
      <img src="http://placekitten.com/300/300" alt="Image 5">
    </div>
  </div>
</div>

附件图片展示了预期实现的效果。

解决方案 #

问题根源是Owl Carousel会自动管控轮播项的布局逻辑，直接修改marginRight会被组件内置样式覆盖。可以通过类名切换结合CSS优先级的方式实现需求：

修改后的代码 #

更新CSS

.owl-carousel .item {
  display: inline-block;
  margin-right: 10px;
  transition: all 0.3s ease-in-out;
  border-radius : 50%;
}

.owl-carousel .item img {
  border-radius : 50%;
}

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

/* 新增：通过容器类切换控制非hover项间距 */
.owl-carousel.item-hover-active .item:not(.hovered-item) {
  margin-right: 50px;
}
.owl-carousel.item-hover-active .item.hovered-item {
  margin-right: 30px;
}

更新JavaScript

$(function() {
  var owl = $(".owl-carousel");
  owl.owlCarousel({
    items: 5,
    loop: true,
    nav: true
  });

  // 绑定鼠标进入事件
  owl.find('.item').on('mouseenter', function() {
    $(this).addClass('hovered-item');
    owl.addClass('item-hover-active');
  });

  // 绑定鼠标离开事件
  owl.find('.item').on('mouseleave', function() {
    $(this).removeClass('hovered-item');
    owl.removeClass('item-hover-active');
  });
});

原理说明 #

• 通过给当前悬停的轮播项添加hovered-item类，给轮播容器添加item-hover-active类，利用CSS选择器精准控制非悬停项的间距
• 这种方式不会与Owl Carousel的内置布局逻辑冲突，类选择器的样式优先级更高，能覆盖组件默认样式
• 保留了原有的过渡动画，整体效果更流畅自然

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