使用 javascript 或 css 具有“.active”类的第一个和最后一个滑块元素的不透明度

Question

我有 owl 个包含 5 个项目的旋转木马滑块。我的问题是我需要滑块的第一个和最后一个元素始终不透明。 Slider 有 15 个元素，其中 9 个是克隆的，5 个是 .active class，一个是克隆的 .active.

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

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

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

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

Answer 1

我不在家，但试试这样：

function setOpacity() {
    var elements = $('.active');
    let count = 0;

    $(elements).each(function(k,v) {
       if (count == 0 || count == elements.length - 1) {
          $(v).css('opacity', '0.8');
       }
       count++;
    });
}

$(document).ready(function() {
   setOpacity();
});

运行每次您希望它更新时都会起作用。例如，单击按钮。

Answer 2

你可以用 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;

Answer 3

您可以使用 owlCarouselActive [0] 访问第一个元素，并使用 owlCarouselActive [owlCarouselActive.length-1] 访问最后一个元素。通常你可以通过 owlCarouselActive [i] 访问第 i 个元素。

使用 javascript 或 css 具有“.active”类的第一个和最后一个滑块元素的不透明度

Opacity on first and last element of slider which has ".active" classes using javascript or css

html

javascript

css

slider

owl-carousel

使用 javascript 或 css 具有“.active”类 的第一个和最后一个滑块元素的不透明度

Opacity on first and last element of slider which has ".active" classes using javascript or css

html

javascript

css

slider

owl-carousel

使用 javascript 或 css 具有“.active”类的第一个和最后一个滑块元素的不透明度