0

Есть слайдер slick, 6 изображений, 3 активных (то есть на странице показывается только 3 картинки). Хочу чтобы блок с картинкой, который по центру был с opacity:1, а блок от него слева и справа - opacity:0.5. Так как есть прокрутка, рендорятся блоки, css понятное дело не срабатывает. Но и js тоже, нужна постоянная проверка изменений.

Как это можно реализовать?

<div class="wrap">
   <div class="item1"></div>
   <div class="item2"></div>
   <div class="item3"></div>
   <div class="item4"></div>
   <div class="item5"></div>
   <div class="item6"></div>
</div>
2

1 ответ 1

1

У slick слайда есть класс slick-slide, у активного слайда есть класс slick-current. Соответственно css может быть таким:

.slick-slide:not(.slick-current) {
    opacity: 0.5;
}
2
  • да, это работает, но почему то у меня slick-current стоит в начале списка а не поцентру?
    – max
    13 окт 2017 в 8:25
  • разобрался, спасибо !!
    – max
    13 окт 2017 в 8:29

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.