Question

如果你看看这个：

说你点击底部的9。它显示8 9 10.我只是想在9的左侧和右侧添加一些额外的空间。或者任何其他活动项目。那么，例如，8的右半部分和10的左半部分是可见的吗？

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

Answer 1

我已使用以下active将owl-item课程添加到#sync1的有效js。

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

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

#sync1 .active {
    margin:0 50px;
}

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

UPDATED FIDDLE

Answer 2

我试了一下。你为'＃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;}

点击此处fiddle

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

2 个答案:

UPDATED FIDDLE