Я использую гладкий слайдер и показываю 3 слайда, я хотел бы добавить особый стиль на центральный слайд. используя nth-of-type, но, похоже, он не работает, когда я добавляю .slick-active: nth-of-type (2) какие-либо идеи?

Например:

<div class="slickslider">
    <div class="slick-slide"></div>
    <div class="slick-slide"></div>
    <div class="slick-slide"></div>
    <div class="slick-slide slick-current slick-active"></div>
    <div class="slick-slide slick-active"></div>
    <div class="slick-slide slick-active"></div>
    <div class="slick-slide"></div>
    <div class="slick-slide"></div>
</div>



.slick-slide{
      background: blue;
      width: 20px;
      height: 20px;
      margin-bottom: 1px;
    }
    .slick-active{
      background: green;
      width: 20px;
      height: 20px;
    }
    .slick-active:nth-of-type(2){
      background: pink;
    }

https://jsfiddle.net/pixelatorz/73scpych/2/

1
pixelatorz 5 Янв 2016 в 18:46

2 ответа

Лучший ответ

Вы можете сделать это таким образом, играя в процесс исключения:

.slickslider .slick-active + .slick-active:nth-child(odd){
    background: pink !important;
}

См. демонстрацию

По сути, удалите первый с помощью +, а затем удалите последний, выбрав дочерний элемент odd. Или первый ребенок тоже работал бы

ИЗМЕНИТЬ

Если вы думаете, что в будущем будет более трех активных слайдов, и вы хотите сделать это более надежным, я предлагаю вам обернуть активные слайды в <span> и классифицировать их как активные слайды или что-то подобное. Затем. вы сможете выбирать их с помощью nth-child, не используя .slickslider в качестве родителя.

2
LOTUSMS 5 Янв 2016 в 16:04

Глупое решение, но работает:

.slick-slide:nth-of-type(6){
  background: pink;
}
0
Oscar LT 5 Янв 2016 в 16:02