css 悬停后更改owl轮播项目间距

enter image description here我的代码中有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';
    });
  });
});

轮播代码只是一个简单代码：
x一个一个一个一个x一个一个二个一个x一个一个三个一个
附上的图片是我想要达到的结果

花了几分钟重新考虑这一点;owl插件做了一些 Package 和其他有趣的事情来操作DOM，所以我们必须处理它。它用类own-item Package 父元素，这样我们就得到了悬停项的父元素，然后处理该父元素的兄弟元素。
由于样式的原因，我们不能添加左/右边距，因为这会使整个carousel奇怪地缠绕，我们必须使用transformX。我通过向我们要操作的CSS的每个父兄弟节点添加一个data属性来实现这一点。这可能不完全是您想要的直接.next(hoverthing)和prev兄弟间距，但我相信您可以从中添加任何您需要的内容还有那些。

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

  owl.owlCarousel({
    items: 5,
    loop: false,
    nav: true
  });

  owl.on('mouseenter', hoverthing, function(event) {
    const hoveredParent = $(this).closest(hoverthing);
    hoveredParent.next(hoverthing).nextAll(hoverthing).each(function() {
      this.dataset.mole = "right";
    });
    hoveredParent.prev(hoverthing).prevAll(hoverthing).each(function() {
      this.dataset.mole = "left";
    });
  }).on('mouseleave', hoverthing, function(event) {
    const hoveredParent = $(this).closest(hoverthing);
    hoveredParent.next(hoverthing).nextAll(hoverthing).each(function() {
      this.dataset.mole = "";
    });
    hoveredParent.prev(hoverthing).prevAll(hoverthing).each(function() {
      this.dataset.mole = "";
    });
  });
});

.owl-carousel .item {
  display: inline-block;
  margin-right: 1rem;
  transition: all 0.3s ease-in-out;
  transform: scale(1.0);
}

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

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

.owl-carousel .owl-item[data-mole="right"] {
  transform: translateX(1em);
}

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

<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>

css 悬停后更改owl轮播项目间距

1条答案

相关问题

热门标签

最新问答