Slick Slider圆点样式优化：仅修改激活圆点不影响滑块背景

Hey，我懂你遇到的这个麻烦——用.slick-active给Slick Slider的激活圆点设置样式时，连带着轮播图的背景也被改掉了，现在只想保留激活圆点的背景，让滑块背景恢复正常对吧？

先理清楚你的问题场景：你想通过.slick-active类定义激活状态下圆点的样式，但发现这个类同时作用在了激活的轮播滑块上，导致滑块背景也被同步修改，现在需要移除滑块的背景样式，只保留激活圆点的效果。

先看看你最初的代码：

初始CSS代码 #

.slick-active{ 
  width: 1.333rem; 
  height: 1.333rem; 
  background: #23aae2; 
  border-radius: 50%; 
} 
.comment__choise li{ 
  display: inline-block; 
  width: 1.333rem; 
  height: 1.333rem; 
  border: 0.067rem dashed #23aae2; 
  border-radius: 50%; 
  margin-right: 5px; 
}

初始JS代码 #

$(document).ready(function(){ 
  $('.single-item').slick({ 
    dots: true, 
    dotsClass: 'comment__choise > li', 
    infinite: false, 
  }); 
});

问题的根源在于：.slick-active类会被同时添加到激活的圆点（li元素）和当前激活的轮播滑块上，所以你的CSS样式会同时影响这两个元素，导致滑块背景也变成了蓝色。

最终解决方案 #

我们可以利用Slick Slider自带的.slick-current类——这个类只会绑定在当前激活的轮播滑块上，不会作用在圆点上。只需要给.slick-current设置回你想要的滑块背景色（比如白色），就能覆盖掉.slick-active对滑块的影响，同时保留圆点的激活样式：

.slick-active{ 
  width: 1.333rem; 
  height: 1.333rem; 
  background: #23aae2; 
  border-radius: 50%; 
} 
.slick-current{ 
  background: #fff; 
}

这样调整后，激活的圆点会保持蓝色圆形背景，而当前轮播滑块的背景会恢复为白色，完美解决两者的样式冲突！

内容的提问来源于stack exchange，提问作者Alex Nikos