微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

代码jsfiddle.net/mpvow81d/

网站 ilyin1ib.beget.tech

enter image description here


    .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 中发现了困难。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。