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

Question

I have owl carousel slider with 5 items. And my problem is that i need first and last element of my slider to be always with opacity. Slider has like 15 elements which 9 cloned, 5 have .active class and one with cloned and .active.

I tryied make it using javascript where i found all ".active" classes in slider, but i don't exactly know what i should do with object which was found.

There is code which found all ".active" classes

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

I need in order to this .active first and last have :before with my background style when i click on button prev or next.

Answer 1

You could do this with 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;