Применение стилей только к активным блокам owl carousel?

Question

[Дмитрий]

У меня есть 5 отзывов. Отображаются по 3. Нужно, что бы у первого отображаемого отзыва текст выравнивался по левому краю, у второго по центру и у третьего по правой стороне. Я привязал стили к классу .active через nth-child в css. Но вот на примере, active у нас первый по счету, но стили у него все равно те, которые применились при загрузке страницы. Почему стили применяются только во время загрузки и не изменяются динамически? В слике данный способ работал бы без проблем. UPD: пример, нужно проскроллить вниз к отзывам

Answer 1

[Евгений Вольф]

Применение стилей только к активным блокам owl carousel?

На вскидку - только через JS, т.к. в CSS'е (пока) нет селектора "предыдущий элемент".

Comments

[Дмитрий]

В смысле предыдущий? У меня всегда будет 3 блока с классом active. Я и привязал стили .active:nth-child(1), .active:nth-child(2), .active:nth-child(3). Это ведь рабочий вариант

[Евгений Вольф]

Дмитрий: видимо, что-то упустил в Вашем вопросе. Можно посмотреть пример кода где-то?

[Дмитрий]

Евгений Вольф, разве что сам сайт, скролл вниз к отзывам. Правда я заметил, что owl почему-то задает класс active и четвертому элементу, хотя он скрыт, и в опциях задано количество в 3 элемента..

[Евгений Вольф]

Дмитрий: я понял где я ошибся, owl метит "активными" все видимые элементы... мне почему-то казалось, что таковым должен быть только "центральный" элемент... Сейчас подумаю, пару минут :)

[Евгений Вольф]

Дмитрий: вот решение Вашей проблемы. По порядку: 1 - левый элемент, 2 - средний, 3 - правый. Для примера, я изменил им background, Вы можете изменить любой другой параметр :)

[Дмитрий]

Евгений Вольф, а как так получается, что такой вариант работает, а с nth-child() нет?) И может вы знаете почему owl устанавливает активность и на 4й блок?

[Евгений Вольф]

Дмитрий: на счёт работы nth-* justdealman Вам подсказал (предлагаю отметить его ответ - решением), nth - считает элементы, а не классы, иначе говоря, nth - не понимает селекторы, если бы понимал, пример бы выглядел приблизительно так: .owl-stage-outer:nth-of-child(.active) (очень условно), но тут не хватало бы селектора с номером... Конкретно Ваш пример работал в том случае, если элемент номер-N имел класс .active.

На счёт owl-carousel и класса на 4-м слайде не подскажу, но мне кажется это не есть проблема, Вы можете так же, как я показал - добавить (переопределить) стили к 4-му, 5-му и любому другому элементу...

[Дмитрий]

Евгений Вольф, понял, спасибо)

Answer 2

[justdealman]

:nth-child считает узлы, без разницы какой селектор вы туда подставите.

Сделайте демку на jsFiddle, найдем решение.

Comments

[Дмитрий]

Чот я хз, но не получается подключить к фидлу owl. Обновил вопрос ссылкой на сайт с проблемой. Нужно проскроллить вниз к отзывам

[justdealman]

.owl-item.active {
text-align: left;
}
.owl-item.active + .active {
text-align:center;
}
.owl-item.active + .active + .active {
text-align:right;
}

[justdealman]

стили только удалите свои с позиционированием, чтобы конфликтов не было

[Дмитрий]

Спасибо)