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-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>

光滑旋转木马中的目标活动元素

1 个答案: