javascript - 使用 javascript 或 css 具有 ".active"类的 slider 的第一个和最后一个元素的不透明度

Question

我有包含 5 个元素的 Owl Carousel slider 。我的问题是我需要 slider 的第一个和最后一个元素始终不透明。 Slider 有大约 15 个元素，其中 9 个是克隆的，5 个是 .active 类，一个是克隆的和 .active。

我尝试使用 javascript 实现它，我在 slider 中找到了所有“.active”类，但我不完全知道我应该如何处理找到的对象。

有找到所有“.active”类的代码

var owlCarouselActive = document.getElementById("slider-tour").getElementsByClassName("owl-item active");

我需要为了这个 .active 首先和最后有 :before 当我点击按钮上一个或下一个时我的背景样式。

Answer 1

你可以用javascript做到这一点

 var owlCarouselActive = document.getElementsByClassName("owl-item active");
 var first = owlCarouselActive[0]; //get first item
 var last = owlCarouselActive[owlCarouselActive.length - 1]; //get last item

 first.style.opacity = 0.8;
 last.style.opacity = 0.8;