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

Question

我有 5 个项目的猫头鹰旋转木马滑块。我的问题是我需要滑块的第一个和最后一个元素始终不透明。Slider 有 15 个元素，其中 9 个是克隆的，5 个具有.active类，1 个具有克隆和.active.我尝试使用 javascript 在滑块中找到所有“.active”类，但我不完全知道我应该对找到的对象做什么。有找到所有“.active”类的代码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();

});

每次您希望它更新时都运行该函数。EG 按下按钮。

Answer 2

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