在活动项目周围添加额外的空间

Adding extra space around active item

本文关键字：空间 添加 活动 项目 周围      更新时间：2023-09-26

如果你看看这个：

https://jsfiddle.net/h8kmove5/27/

假设你点击底部的 9。它显示 8 9 10。我只是想在 9 的左右两侧添加一点额外的空间。或任何其他活动项目。因此，例如，8 的右半部分和 10 的左半部分是可见的？

#sync1 .synced .item {
  margin-left: 50px;
  margin-right: 50px;
}

我尝试了一些东西。您为"#sync2"添加类"同步"的方式，我为"#sync1"添加了相同的类。

var current = this.currentItem;
console.log(current)
 $("#sync1")
  .find(".owl-item")
  .removeClass("synced")
  .eq(current+1)
  .addClass("synced")

并为该同步元素添加了边距。

#sync1 .synced{margin:0 10px 0 10px;}

在这里检查小提琴

我使用以下js active类添加到#sync1的活动owl-item中。

$("#sync1")
  .find(".owl-item")
  .removeClass("active")
  .eq(current+1)
  .addClass("active")

并使用以下css在活动项目周围添加额外的空间。

#sync1 .active {
    margin:0 50px;
}
#sync1 .owl-wrapper {
    margin-left: -50px;
}

更新的小提琴

相关文章：