如何移除Slick-slider导航中激活幻灯片的多余背景？

问题原因 #

你给所有轮播导航点下的button元素设置了带!important标记的白色背景，仅给激活状态的外层li元素设置橙色背景，没有覆盖激活状态下button的白色背景样式，因此白色背景会一直显示，挡住外层li的橙色背景。

解决方法 #

新增针对激活状态下button的样式，覆盖原有白色背景配置即可，修改后的完整CSS如下：

.slick-dots li button {
    height: 4px !important;
    padding: 4px !important;
    width: 20px !important;
    background: #fff!important;
    opacity: 0.5;
}

li.slick-active {
    width: 40px !important;
    height:100% !important;
    background: @orange !important;
    z-index:99 !important;
    transition: 0.3s;
}

/* 新增这段样式 */
.slick-dots li.slick-active button {
    background: transparent !important;
    opacity: 1;
    width: 100% !important;
}

.slick-dots li button:before {
  display:none;
}

.slick-dots {
  bottom: 100px !important;
  box-sizing: border-box;
}

补充说明 #

如果你不需要保留透明效果，也可以直接把激活状态button的background设置为@orange !important，可以达到完全一样的显示效果。

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