当幻灯片在 Slick-slider 导航中处于活动状态时，如何删除不必要的背景？

问题描述

对于活动幻灯片，我为非活动幻灯片设置的标记中显示白色背景，如何使其在活动幻灯片上消失？

代码jsfiddle.net/mpvow81d/

网站 ilyin1ib.beget.tech

    .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 button:before {
      display:none;
    }


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

解决方法

尊敬的开发者， 问题可以这样解决：

1. 随心所欲

.slick-active button{
display:none;
}

2.正确或简单的方法来做到这一点。

.slick-active button{
background:#ff5722 !important;
}

在解决方案二中，您可以将 slick-active 类中的白色按钮的颜色更改为橙​​色，而不是为活动的 slick 提供样式并使其成为橙色容器，这使您的代码更小、更简单、更方便。

建议：在代码笔或任何其他网站（如 repl）中上传您的代码，我个人在 js fiddle 中发现了困难。