Как в циклической карусели изменить у центрального элемента прозрачность?

Question

[ligisayan]

Есть зацикленная карусель owl carousel 2 у которой элементы изначально полупрозрачные, а при наведении становятся непрозрачными. Хочу сделать так, чтобы независимо от количества элементов в карусели центральный блок был всегда непрозрачным. Пробовал это сделать через :nth-child(), но проблема в том, что в зацикленной карусели создаются дополнительные клонированные блоки и не получается сделать центральный элемент непрозрачным - что можно предпринять?
фидл

Comments

[ligisayan]

RU пример в ссылке фидл зашит)

Answer 1

[Максим Тимофеев]

nth-of-type - работает на ура
https://jsfiddle.net/1csmn6g6/

Но так как у Вас кол-во блоков на странице, зависит от вьюпорта, то лучше в js посчитать кол-во .owl-item.active и задать среднему класс, при смене кадра пересчитывать

Comments

[ligisayan]

пробую пересчитать, но непонятно, что оно считает

var active = $('.owl-carousel').find(".owl-item.active");
    console.log(active.text());

[Сергей delphinpro]

ligisayan: console.log(active.size());

[Ankhena]

ligisayan: я если поместилось четное количество блоков, то какой из них центральный?

[ligisayan]

Сергей спасибо! Ankhena W а не будет четного числа - всегда нечетное выводится на экран: 5,3,1

Answer 2

[ligisayan]

Есть на самом деле самое правильное и крутое решение - нужно указать в настройках карусели center:true; и тогда с помощью стилей все легко решается!
фидл