Slick Carousel 中的目标活动元素

Question

嘿伙计们，我似乎无法找到一个解决方案来定位光滑轮播中的活动元素。我想要做的就是向单击的活动元素添加样式。

我试过了

.slick-active { background: lightgray;}
.slick-active + .slick-active { background: white; }

.slick-active:nthchild(1){}
.slick-active:nth-type-of(1){}
.slick-active:first-type-of{}
}

如果幻灯片包含一些元素，第一个选项会起作用，但我不想为添加的每个元素都进行硬编码。

如果我使用 .slick-active{}，它将定位所有显示的元素。

有什么想法吗？我正在使用 slick 轮播。

Answer 1

是的，.slick-active 应用于轮播中可见的所有当前 slick 元素，class 您要查找的当前选定元素是 .slick-current

您的规则是：

.slick-slide               { background: white;}
.slick-slide.slick-current { background: lightgray;}

下面是一个工作示例，单击底部的蓝色 运行代码片段 按钮可查看实际效果。

$('#slider').slick({
  infinite: true,
  slidesToShow: 3,
  centerMode: true,
  slidesToScroll: 1
});

h1 {
  text-align: center;
  color: red;
  margin: 0;
}
.slick-slide {
  background-color: white;
}
.slick-slide.slick-current h1 {
  background-color: lightgray;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div id="slider">
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>8</h1>
  <h1>9</h1>
</div>

Slick Carousel 中的目标活动元素

Target Active Element in Slick Carousel

css-selectors

carousel

slick.js